@model PaymentModel

<div class="top-header">
    <div class="header">
        <div class="header__icon">
            @if (Model.CustomLogoLink != null)
            {
                <img class="header__icon__img" src="@Model.CustomLogoLink" height="40">
            }
            else
            {
                <img class="header__icon__img" src="~/img/logo-white.png" height="40">
            }
        </div>
    </div>
    <div class="timer-row">
        <div class="timer-row__progress-bar" style="width: 0%;"></div>
        <div class="timer-row__spinner">
            @Html.Partial("Checkout-Spinner")
        </div>
        <div class="timer-row__message">
            <span v-if="srvModel.status === 'expired' || srvModel.status === 'invalid'">
                {{$t("Invoice expired")}}
            </span>
            <span v-else-if="expiringSoon">
                {{$t("Invoice expiring soon...")}}
            </span>
            <span v-else>
                {{$t("Awaiting Payment...")}}
            </span>
        </div>
        <div class="timer-row__time-left">@Model.TimeLeft</div>
    </div>
</div>
<div class="order-details">
    @if (Model.AvailableCryptos.Count > 1)
    {
        <div class="currency-selection">
            <div class="single-item-order__left">
                <div style="font-weight: 600;">
                    {{$t("Pay with")}}
                </div>
            </div>
            <div class="single-item-order__right">
                <div class="payment__currencies">
                    @foreach (var crypto in Model.AvailableCryptos)
                    {
                        <a href="@crypto.Link" onclick="return changeCurrency('@crypto.PaymentMethodId');">
                            <img style="height:32px; margin-left:5px;" alt="@crypto.PaymentMethodId" src="@crypto.CryptoImage" />
                        </a>
                    }
                </div>
                <div class="payment__spinner">
                    @Html.Partial("Checkout-Spinner")
                </div>
            </div>
        </div>
    }
    <div class="single-item-order buyerTotalLine">
        <div class="single-item-order__left">
            <div class="single-item-order__left__name">
                {{ srvModel.storeName }}
            </div>
            <div class="single-item-order__left__description">
                {{ srvModel.itemDesc }}
            </div>
        </div>
        <div class="single-item-order__right">
            <div class="single-item-order__right__btc-price" id="buyerTotalBtcAmount">
                <span>{{ srvModel.btcDue }} {{ srvModel.cryptoCode }}</span>
            </div>
            <div class="single-item-order__right__ex-rate">
                1 {{ srvModel.cryptoCode }} = {{ srvModel.rate }}
            </div>
        </div>

        <span class="fa fa-angle-double-down"></span>
        <span class="fa fa-angle-double-up"></span>
    </div>
    <line-items>
        <div class="line-items">
            <div class="line-items__item">
                <div class="line-items__item__label">{{$t("Order Amount")}}</div>
                <div class="line-items__item__value">{{srvModel.orderAmount}} {{ srvModel.cryptoCode }}</div>
            </div>
            <div class="line-items__item">
                <div class="line-items__item__label">
                    <span>{{$t("Network Cost")}}</span>
                </div>
                <div class="line-items__item__value" i18n="">{{srvModel.networkFeeDescription }}</div>
            </div>
            <div class="line-items__item">
                <div class="line-items__item__label">
                    <span>{{$t("Already Paid")}}</span>
                </div>
                <div class="line-items__item__value">-{{srvModel.btcPaid }} {{ srvModel.cryptoCode }}</div>
            </div>
            <div class="line-items__item line-items__item--total">
                <div class="line-items__item__label">{{$t("Due")}}</div>
                <div class="line-items__item__value">{{srvModel.btcDue}} {{ srvModel.cryptoCode }}</div>
            </div>
        </div>
    </line-items>
    <div class="payment-tabs">
        <div class="payment-tabs__tab active" id="scan-tab">
            <span>{{$t("Scan")}}</span>
        </div>
        <div class="payment-tabs__tab" id="copy-tab">
            <span>{{$t("Copy")}}</span>
        </div>
        @if (Model.AllowCoinConversion)
        {
            <div class="payment-tabs__tab" id="altcoins-tab">
                <span>{{$t("Conversion")}}</span>
            </div>
            <div id="tabsSlider" class="payment-tabs__slider three-tabs"></div>
        }
        else
        {
            <div id="tabsSlider" class="payment-tabs__slider"></div>
        }
    </div>
</div>

<div adjust-height="" class="payment-box">
    <div class="bp-view payment manual-flow enter-contact-email active" id="emailAddressView">
        <form class="manual__step-one refund-address-form contact-email-form" id="emailAddressForm" name="emailAddressForm" novalidate="">
            <div class="manual__step-one__header">
                <span>{{$t("Contact and Refund Email")}}</span>
            </div>
            <div class="manual__step-one__instructions">
                <span class="initial-label">
                    <span>{{$t("Contact_Body")}}</span>
                </span>
                <span class="submission-error-label">{{$t("Please enter a valid email address")}}</span>
            </div>
            <div class="input-wrapper">
                <input class="bp-input email-input ng-pristine ng-invalid ng-touched" id="emailAddressFormInput" v-bind:placeholder="$t('Your email')" type="email">
                <bp-loading-button>
                    <button type="submit" class="action-button" style="margin-top: 15px;">
                        <span class="button-text">{{$t("Continue")}}</span>
                        <div class="loader-wrapper">
                            @Html.Partial("Checkout-Spinner")
                        </div>
                    </button>
                </bp-loading-button>
            </div>
        </form>
    </div>
    <div class="bp-view payment scan" id="scan">
        <div class="payment__scan">
            <img v-bind:src="srvModel.cryptoImage" class="qr_currency_icon" />
            <qrcode v-bind:val="srvModel.invoiceBitcoinUrlQR" v-bind:size="256" bg-color="#f5f5f7" fg-color="#000">
            </qrcode>
        </div>
        <div class="payment__details__instruction__open-wallet">
            <a class="payment__details__instruction__open-wallet__btn action-button" v-bind:href="srvModel.invoiceBitcoinUrl">
                <span>{{$t("Open in wallet")}}</span>
                <span class="glyphicon glyphicon-new-window"></span>
            </a>
        </div>
    </div>

    <div class="bp-view payment manual-flow" id="copy">
        <div class="manual__step-two__instructions">
            <span i18n="">{{$t("CompletePay_Body", srvModel)}}</span>
        </div>
        <div class="copied-label" style="display:none;">
            <span>{{$t("Copied")}}</span>
        </div>
        <nav v-if="srvModel.isLightning">
            <div class="manual-box flipped" style="margin-bottom: 30px;">
                <div class="manual-box__amount copySectionBox">
                    <label>{{$t("BOLT 11 Invoice")}}</label>
                    <div class="inputWithIcon">
                        <input type="text" class="checkoutTextbox" v-bind:value="srvModel.btcAddress" readonly="readonly" />
                        <img v-bind:src="srvModel.cryptoImage" />
                    </div>
                </div>
                <div class="manual-box__address">
                    <div class="flipper flipped-initially">
                        <div class="back"></div>
                        <div class="front">
                            <div class="manual-box__address__arrow"></div>
                            <div class="copySectionBox">
                                <label>{{$t("Peer Info")}}</label>
                                <div class="inputWithIcon">
                                    <input type="text" class="checkoutTextbox" v-bind:value="srvModel.peerInfo" readonly="readonly" />
                                    <img v-bind:src="srvModel.cryptoImage" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </nav>
        <nav v-else>
            <div class="copyBox">
                <div class="copySectionBox bottomBorder">
                    <label>{{$t("Amount")}}</label>
                    <div class="manual-box__amount__value copy-cursor" ngxclipboard="">
                        <span>{{srvModel.btcDue}}</span> {{ srvModel.cryptoCode }}
                    </div>
                </div>
                <div class="separatorGem"></div>
                <div class="copySectionBox">
                    <label>{{$t("Address")}}</label>
                    <div class="inputWithIcon">
                        <input type="text" class="checkoutTextbox" v-bind:value="srvModel.btcAddress" readonly="readonly" />
                        <img v-bind:src="srvModel.cryptoImage" />
                    </div>
                </div>
            </div>
        </nav>
    </div>
    @if (Model.AllowCoinConversion)
    {
        <div id="altcoins" class="bp-view payment manual-flow">
            <nav v-if="srvModel.isLightning">
                <div class="manual__step-two__instructions">
                    <span>
                        {{$t("ConversionTab_Lightning")}}
                    </span>
                </div>
            </nav>
            <nav v-else>
                <div class="manual__step-two__instructions">
                    <span>
                        {{$t("ConversionTab_BodyTop", srvModel)}}
                        <br /><br />
                        {{$t("ConversionTab_BodyDesc", srvModel)}}
                    </span>
                </div>
                <center>
                    <script>function shapeshift_click(a, e) { e.preventDefault(); var link = a.href; var shapeshiftWindow = window.open(link, '1418115287605', 'width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=0,left=0,top=0'); shapeshiftWindow.focus(); return false; }</script>
                    <a onclick="shapeshift_click(this, event);" v-bind:href="srvModel.shapeshiftUrl">
                        <img src="https://shapeshift.io/images/shifty/xs_light_altcoins.png" class="ss-button">
                    </a>

                    @*Changelly doesn't have TO_AMOUNT support so we can't include it
                            <script type="text/javascript">function open_widget(a, e) { e.preventDefault(); var link = a.href; var changellyWindow = window.open(link, 'Changelly', 'width=600,height=470,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=0,left=0,top=0'); changellyWindow.focus(); return false; }</script>
                        <a onclick="open_widget(this, event);" href="https://changelly.com/widget/v1?auth=email&from=DASH&to=BTC&address=&amount=1&merchant_id=&ref_id=">
                            <img src="https://changelly.com/pay_button_pay_with.png" alt="Changelly" />
                        </a>*@
                </center>
            </nav>
        </div>
    }

    <div class="bp-view pad" id="paid">
        <div class="status-block">
            <div class="success-block">
                <div class="status-icon">
                    <div class="status-icon__wrapper">
                        <div class="inner-wrapper">
                            <div class="status-icon__wrapper__icon">
                                <img src="~/imlegacy/checkmark.svg">
                            </div>
                            <div class="status-icon__wrapper__outline"></div>
                        </div>
                    </div>
                </div>
                <div class="success-message">{{$t("This invoice has been paid")}}</div>
                <button class="action-button">
                    <bp-done-text>
                        <span>{{$t("Return to StoreName", srvModel)}}</span>
                    </bp-done-text>
                </button>
            </div>
        </div>
        <div class="button-wrapper refund-address-form-container" id="refund-overpayment-button">
        </div>
    </div>

    <div class="bp-view expired" id="archived">
        <div class="expired-icon">
            <img src="~/imlegacy/archived.svg">
        </div>
        <div class="archived__message">
            <div class="archived__message__header">
                <span>{{$t("This invoice has been archived")}}</span>
            </div>
            <div>
                <span>{{$t("Archived_Body")}}</span>
            </div>
        </div>
    </div>

    <div class="bp-view expired" id="expired">
        <div>
            <div class="expired__body">
                <div class="expired__header">{{$t("What happened?")}}</div>
                <div class="expired__text" i18n="">
                    {{$t("InvoiceExpired_Body_1", {storeName: srvModel.storeName, maxTimeMinutes: @Model.MaxTimeMinutes})}}
                </div>
                <div class="expired__text">
                    {{$t("InvoiceExpired_Body_2")}}
                </div>
                <div class="expired__text">
                    {{$t("InvoiceExpired_Body_3")}}
                </div>
                <div class="expired__text expired__text__smaller">
                    <span class="expired__text__bullet">{{$t("Invoice ID")}}</span>:
                    {{srvModel.invoiceId}}
                    <br />
                    <span class="expired__text__bullet">{{$t("Order ID")}}</span>:
                    {{srvModel.orderId}}
                </div>
            </div>
            <a href="/invoices" class="action-button" style="margin-top: 20px;">
                <bp-done-text>
                    <span>{{$t("Return to StoreName", srvModel)}}</span>
                </bp-done-text>
            </a>
        </div>
    </div>

    @* Obsolete? Start *@
    <div class="bp-view" id="link-expired" style="padding-top: 3.6rem;">
        <div class="manual__step-one refund-address-form" novalidate="">
            <div class="manual__step-one__header" i18n="">Link Expired</div>
            <div class="manual__step-one__instructions">
                <span class="initial-label" i18n="">Sorry, this link has expired. Please try requesting another refund by clicking the button below.</span>
            </div>
            <div class="input-wrapper">
                <bp-loading-button i18n="">
                    <button class="action-button" style="margin-top: 15px;" type="submit">
                        <span class="button-text" lcl="">Request Refund</span>
                        <div class="loader-wrapper">
                            @Html.Partial("Checkout-Spinner")
                        </div>
                    </button>
                </bp-loading-button>
            </div>
        </div>
    </div>
    <div class="bp-view confirm-contact-email-view">
        <form class="manual__step-one refund-address-form contact-email-form ng-untouched ng-pristine" novalidate="">
            <div class="manual__step-one__header" i18n="">Contact &amp; Refund Email</div>
            <div class="manual__step-one__instructions">
                <span class="initial-label" i18n="">If there is an issue with this payment, or a refund needs to be made, we will contact you at this address.</span>
            </div>
            <div class="input-wrapper">
                <input bp-focus="focusEmailInput" class="bp-input email-input ng-untouched ng-pristine" disabled="disabled" name="receiptEmail" placeholder="Your email"
                       style="opacity: 1;" type="email">
                <button type="submit" class="action-button" style="margin-top: 15px;">
                    <span i18n="">Confirm email address</span>
                </button>
            </div>
            <div class="refund-address-form__link" id="wrong-email-button" style="color: #a9a9a9;">
                <span i18n="">Wrong email?</span>
            </div>
        </form>
    </div>
    <div class="bp-view wrong-email-view" id="compromised-invoice">
        <div class="manual__step-one refund-address-form" novalidate="" style="margin-top: -1rem;">
            <div class="manual__step-one__header">
                <span i18n="">There seems to be a problem</span>
            </div>
            <div class="manual__step-one__instructions">
                <span class="initial-label" i18n="">
                    This invoice was previously opened, and the address <strong class="placeholder-refundEmail">{Entered email address}</strong> was submitted as your contact email. If you entered this email, you can still safely make your payment. <br> <br>
                    If you did not submit the email address, it's possible a thief falsely
                    submitted this address to steal refunds. Please contact the merchant
                    about this security incident, and try your payment again.
                </span>
            </div>
            <div class="input-wrapper">
                <a class="action-button" style="margin-top: 15px;" target="_blank" href="mailto:@Model.StoreEmail">
                    <span i18n="">Contact {{srvModel.storeName}}</span>
                </a>
            </div>
            <div class="refund-address-form__link">
                <span i18n="">I understand, continue to payment&nbsp;→</span>
            </div>
        </div>
    </div>
    <div class="bp-view confirm-bitcoin-address-view" id="confirm-refund-address">
        <form class="manual__step-one refund-address-form ng-untouched ng-pristine ng-valid" novalidate="" style="padding-top: 1.6rem;">
            <div><img src="~/imlegacy/mail.svg"></div>
            <div class="manual__step-one__header">
                <span i18n="">Please confirm your address</span>
            </div>
            <div class="manual__step-one__instructions">
                <span class="initial-label" i18n="">You should receive an email from us in a moment at <strong class="placeholder-refundEmail">{enterd refund email}</strong>. To ensure your refund is sent to the correct address, please confirm your bitcoin address by clicking the link in the email. </span>
            </div>
            <bp-resend-link id="resend-link">
                <div class="bp-resend__link">
                    <span class="link-text">

                        <span i18n="">Resend email</span>

                    </span>
                    <div class="success-text">

                        <img src="~/imlegacy/circle-check.svg">

                        <div i18n="">Email resent</div>

                    </div>
                </div>
            </bp-resend-link>
        </form>
    </div>
    <div class="bp-view refund-address-view" id="enter-refund-address">
        <form class="manual__step-one refund-address-form ng-untouched ng-pristine ng-invalid" name="refundAddressForm" novalidate="" style="margin-top: 28px; margin-bottom: 4rem;">
            <div class="manual__step-one__header">

                <span i18n="">Please provide a refund address.</span>

            </div>
            <div class="manual__step-one__instructions">
                <span class="initial-label">

                    <span i18n="">
                        To send your refund of {BTC to refund} BTC,
                        we’ll need a bitcoin address from your wallet. Please open your bitcoin
                        wallet, copy a receiving address, and paste it below.
                    </span>

                </span>
                <span class="submission-error-label" i18n="" id="invalid-bitcoin-address">Please enter a valid bitcoin address.</span>
            </div>
            <div class="input-wrapper">
                <bp-refund-address name="refundAddress" ngmodel="" class="ng-untouched ng-pristine ng-invalid">
                    <div class="bp-refund-address">
                        <div class="bitcoin-logo">
                            <div><img src="@Model.CryptoImage"></div>
                        </div>
                        <input class="bp-input {'not-empty': addressValue.length &gt; 0} ng-untouched ng-pristine ng-valid" id="refund-address-input" name="refundAddress" ngclass="{'not-empty': addressValue.length &gt; 0}">
                    </div>
                </bp-refund-address>
                <bp-loading-button i18n="" id="request-refund-button">
                    <button class="action-button" style="margin-top: 15px;" type="submit">
                        <span class="button-text" lcl="">Request Refund</span>
                        <div class="loader-wrapper">
                            @Html.Partial("Checkout-Spinner")
                        </div>
                    </button>
                </bp-loading-button>
            </div>
            <div class="refund-address-form__cancel">
                <span i18n="">Cancel</span>
            </div>
        </form>
    </div>
    <div class="bp-view" id="refund-pending">
        <div class="status-block">
            <div class="pending-block" style="position: relative; padding-bottom: 1.6rem;">
                <img src="~/imlegacy/refund-pending.svg">
                <div class="pending-block__header" i18n="">Processing Refund</div>
                <span>
                    <span class="pending-block__message" i18n="">The amount below will be refunded to you within 1-2 business days. </span>
                </span>
            </div>
        </div>
        <div class="manual-box" style="margin-bottom: 30px;">
            <div class="manual-box__amount amount-only">
                <div class="manual-box__amount__label label">
                    <span class="initial-label">&nbsp;</span>
                    <span class="final-label" i18n="">Amount To Be Refunded</span>
                </div>
                <div class="manual-box__amount__value">{BTC Amount} BTC</div>
            </div>
            <div class="manual-box__address">
                <div class="flipper">
                    <div class="back"></div>
                    <div class="front">
                        <div class="manual-box__address__arrow"></div>
                        <div class="manual-box__address__label label" i18n="">Will Be Refunded To</div>
                        <div class="manual-box__address__wrapper">
                            <div class="manual-box__address__wrapper__logo">
                                <img src="~/imlegacy/bitcoin-symbol.svg">
                            </div>
                            <div class="manual-box__address__wrapper__value">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="bp-view expired" id="low-fee">
        <div class="expired__body">
            <div class="expired__header" i18n="" style="font-weight: 400; font-size: 22px;">Payment Confirming</div>
            <div class="expired__text" i18n="">This payment was made with a low <a href="https://bitcoin.org/en/glossary/transaction-fee">bitcoin miner fee</a>, which may prevent it from being accepted by the Bitcoin network.</div>
            <div class="expired__text" i18n="">This is an issue with the configuration of your bitcoin wallet.</div>
            <div class="expired__text" i18n="">
                If the transaction
                doesn't confirm, the funds will be spendable again in your wallet.
                Depending on the wallet, this may take 48-72 hours.
            </div>
            <low-fee-timeline>
                <div class="timeline">
                    <div class="timeline__item">
                        <div class="timeline__item__icon timeline__item__icon--complete">
                            <img src="~/imlegacy/checkmark-small.svg">
                        </div>
                        <div class="timeline__item__name" i18n="">Transaction created</div>
                    </div>
                    <div class="timeline__item">
                        <div class="timeline__item__icon timeline__item__icon--pending">
                            <img src="~/imlegacy/pending.svg">
                        </div>
                        <div class="timeline__item__name">
                            <span i18n="">Transaction confirming — funds have not yet moved</span>
                        </div>
                    </div>
                    <div class="timeline__item">
                        <div class="timeline__item__icon"></div>
                        <div class="timeline__item__name" i18n="">Payment received by {{srvModel.storeName}}</div>
                    </div>
                </div>
            </low-fee-timeline>
        </div>
        <button class="action-button" style="margin-top: .75rem;">
            <bp-done-text>
                <span i18n="">Return to {{srvModel.storeName}}</span>
            </bp-done-text>
        </button>
    </div>
    <div class="bp-view" id="refund-complete">
        <div class="status-block">
            <div class="success-block" style="opacity: 1;">
                <div class="status-icon">
                    <div class="status-icon__wrapper">
                        <div class="inner-wrapper">
                            <div class="status-icon__wrapper__icon">
                                <img src="~/imlegacy/checkmark.svg">
                            </div>
                            <div class="status-icon__wrapper__outline" style="height: 117px; width: 117px;"></div>
                        </div>
                    </div>
                </div>
                <div class="success-message">
                    <span>
                        <span i18n="">Refund Complete</span>
                    </span>
                </div>
            </div>
        </div>
        <div class="manual-box">
            <div class="manual-box__amount amount-only">
                <div class="manual-box__amount__label label">
                    <span class="initial-label" i18n="">Overpaid By</span>
                    <span class="final-label">
                        <span i18n="">Amount Refunded</span>
                    </span>
                </div>
                <div class="manual-box__amount__value">{BTC amount} BTC</div>
            </div>
            <div class="manual-box__address">
                <div class="flipper flipped-initially">
                    <div class="back"></div>
                    <div class="front">
                        <div class="manual-box__address__arrow"></div>
                        <div class="manual-box__address__label label" i18n="">Refunded To</div>
                        <div class="manual-box__address__wrapper">
                            <div class="manual-box__address__wrapper__logo">
                                <img src="~/imlegacy/bitcoin-symbol.svg">
                            </div>
                            <div class="manual-box__address__wrapper__value">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <button class="action-button finished" style="margin-top: 23px;">
            <bp-done-text>
                <span>{{$t("Return to StoreName", srvModel)}}</span>
            </bp-done-text>
        </button>
    </div>
    <div class="footer-button enter-different-address-button">
        <bp-done-text>
            <span>{{$t("Return to StoreName", srvModel)}}</span>
        </bp-done-text>
    </div>
    @* Obsolete? End *@
</div>