@addTagHelper *, Meziantou.AspNetCore.BundleTagHelpers
@inject BTCPayServer.Services.LanguageService langService
@model PaymentModel
@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>@Model.HtmlTitle</title>

    <bundle name="wwwroot/bundles/checkout-bundle.min.css" />

    <script type="text/javascript">
        var srvModel = @Html.Raw(Json.Serialize(Model));
    </script>

    <bundle name="wwwroot/bundles/checkout-bundle.min.js" />
    <script>vex.defaultOptions.className = 'vex-theme-btcpay'</script>

    @if (Model.CustomCSSLink != null)
    {
        <link href="@Model.CustomCSSLink" rel="stylesheet" />
    }

    <style type="text/css">
    </style>
</head>
<body style="background: #E4E4E4">
    <noscript>
        <center style="padding: 2em">
            <h2>Javascript is currently disabled in your browser.</h2>
            <h5>Please enable Javascript and refresh this page for the best experience.</h5>

            <p>Alternatively, click below to continue to our HTML-only invoice.</p>

            <form action="/invoice-noscript" method="GET">
                <button style="text-decoration: underline; color: blue">Continue to javascript-disabled invoice &gt;</button>
            </form>
        </center>
    </noscript>

    <!--[if lte IE 8]>
    <center style="padding: 2em">
      <form action="/invoice-noscript" method="GET">
        <button style="text-decoration: underline; color: blue">Continue to legacy browser compatible invoice page
        </button>
      </form>
    </center>
    <![endif]-->

    <invoice>
        <div class="no-bounce" id="checkoutCtrl">
            <div class="modal page">
                <div class="modal-dialog open opened enter-purchaser-email" role="document">
                    <div class="modal-content long">
                        <div class="content">
                            <div class="invoice">
                                <partial name="Checkout-Body" />
                            </div>
                        </div>
                    </div>
                    <div style="margin-top: 10px; text-align: right;">
                        @* Not working because of nsSeparator: false, keySeparator: false,
                            {{$t("nested.lang")}} >>
                        *@
                        <select class="cmblang reverse invisible" onchange="changeLanguage($(this).val())">
                            @foreach(var lang in langService.GetLanguages())
                            {
                                <option value="@lang.Code">@lang.DisplayName</option>
                            }
                        </select>
                        <script>
                            $(function () {
                                var storeDefaultLang = '@Model.DefaultLang';
                                if (urlParams.lang) {
                                    $(".cmblang").val(urlParams.lang);
                                } else if (storeDefaultLang) {
                                    $(".cmblang").val(storeDefaultLang);
                                }

                                $('select').prettyDropdown({
                                    classic: false,
                                    height: 32,
                                    reverse: true,
                                    hoverIntent: 5000
                                });
                            });
                        </script>
                    </div>
                    <div style="margin-top: 10px; text-align: right;" class="form-text small text-muted">
                        <span>Powered by <a target="_blank" href="https://github.com/btcpayserver/btcpayserver">BTCPay Server</a></span>
                    </div>
                </div>
            </div>
        </div>
    </invoice>
    <script type="text/javascript">
        var storeDefaultLang = '@Model.DefaultLang';
        // initialization
        i18next.init({
            lng: storeDefaultLang,
            fallbackLng: 'en-US',
            nsSeparator: false,
            keySeparator: false,
            resources: {
                'en-US': { translation: locales_en },
                'de-DE': { translation: locales_de },
                'es-ES': { translation: locales_es },
                'ja-JP': { translation: locales_ja },
                'fr-FR': { translation: locales_fr },
                'pt': { translation: locales_pt },
                'pt-BR': { translation: locales_pt_br },
                'nl': { translation: locales_nl },
                'cs-CZ': { translation: locales_cs },
                'is-IS': { translation: locales_is },
                'hr-HR': { translation: locales_hr }
            },
        });

        function changeLanguage(lang) {
            i18next.changeLanguage(lang);
        }

        if (urlParams.lang) {
            changeLanguage(urlParams.lang);
        }
        else if (storeDefaultLang) {
            changeLanguage(storeDefaultLang);
        }

        const i18n = new VueI18next(i18next);

        // TODO: Move all logic from core.js to Vue controller
        Vue.config.ignoredElements = [
            'line-items',
            'low-fee-timeline',
            // Ignoring custom HTML5 elements, eg: bp-spinner
            /^bp-/
        ];
        var checkoutCtrl = new Vue({
            i18n: i18n,
            el: '#checkoutCtrl',
            components: {
                qrcode: VueQr
            },
            data: {
                srvModel: srvModel,
                expiringSoon: false
            }
        });
    </script>
</body>
</html>
