@model PaymentModel
@{
    var displayedPaymentMethods = Model.AvailableCryptos.Where(a => a.Displayed).ToList();
}
<div class="top-header">
    <div class="header">
        @if (!string.IsNullOrEmpty(Model.CustomLogoLink))
        {
            <div class="header__icon">
                <img class="header__icon__img" src="@Model.CustomLogoLink" height="40" asp-append-version="true">
            </div>
        }
        else
        {
            <div class="header__iconcentered">
                <img class="header__iconcentered__img">
            </div>
        }
        <div class="close-icon close-action" v-on:click="close">
            &#10006;
        </div>
    </div>
    <div class="timer-row" v-bind:class="{ 'expiring-soon': expiringSoon }">
        <div class="timer-row__progress-bar" v-bind:style="{ 'width': expirationPercentage+ '%' }"></div>
        <div class="timer-row__spinner" v-if="!invoiceUnpayable && !invoicePaid">
            @await Html.PartialAsync("~/Views/UIInvoice/Checkout-Spinner.cshtml")
        </div>
        <div class="timer-row__message">
            <span v-if="invoiceUnpayable">
                {{$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">{{timerText}}</div>
    </div>
</div>
<div class="order-details">
    <div class="currency-selection">
        <div class="single-item-order__left">
            <div style="font-weight: 600;" id="pay-with-text">
                {{$t("Pay with")}}
            </div>
        </div>
        <div class="single-item-order__right">
            @if (displayedPaymentMethods.Count > 1)
            {
                <div class="paywithRowRight cursorPointer" v-on:click="openPaymentMethodDialog">
                    <span class="payment__currencies " v-show="!changingCurrencies">
                        <img v-bind:src="srvModel.cryptoImage" />
                        <span>{{srvModel.paymentMethodName}}</span>
                        <span class="clickable_indicator fa fa-angle-right"></span>
                    </span>
                </div>
                <div id="vexPopupDialog">
                    <ul class="vexmenu">
                        @foreach (var crypto in displayedPaymentMethods)
                        {
                            <li class="vexmenuitem">
                                <a href="@crypto.Link" class="payment-method" data-payment-method="@crypto.PaymentMethodId" rel="noreferrer noopener">
                                    <img alt="@crypto.PaymentMethodName" src="@crypto.CryptoImage" asp-append-version="true" />
                                    @crypto.PaymentMethodName
                                </a>
                            </li>
                        }
                    </ul>
                </div>
            }
            else
            {
                <div class="payment__currencies_noborder">
                    <img v-bind:src="srvModel.cryptoImage" />
                    <span>{{srvModel.paymentMethodName}}</span>
                    <span v-show="srvModel.isLightning">&#9889;</span>
                </div>
            }
            <div class="payment__spinner" v-show="changingCurrencies || loading">
                @await Html.PartialAsync("~/Views/UIInvoice/Checkout-Spinner.cshtml")
            </div>
        </div>
    </div>

    <div class="single-item-order buyerTotalLine" v-on:click="toggleLineItems" v-bind:class="{ 'expanded': lineItemsExpanded}">
        <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" v-if="srvModel.status === 'paid' && !srvModel.isUnsetTopUp">
                <span>{{ srvModel.btcPaid }} {{ srvModel.cryptoCode }}</span>
            </div>
            <div class="single-item-order__right__btc-price" v-if="srvModel.status !== 'paid' && !srvModel.isUnsetTopUp && parseFloat(srvModel.btcDue) > 0">
                <span>{{ srvModel.btcDue }} {{ srvModel.cryptoCode }}</span>
            </div>
            <div class="single-item-order__right__ex-rate" v-if="srvModel.orderAmountFiat && srvModel.cryptoCode">
                <span v-if="srvModel.cryptoCode === 'sats'">1 sat = {{ srvModel.rate }}</span>
                <span v-else>1 {{ srvModel.cryptoCode }} = {{ srvModel.rate }}</span>
            </div>
        </div>
        <span class="fa fa-angle-double-down" v-if="!srvModel.isUnsetTopUp"></span>
        <span class="fa fa-angle-double-up" v-if="!srvModel.isUnsetTopUp"></span>
    </div>
    <line-items v-if="!srvModel.isUnsetTopUp">
        <div class="extraPayment" v-if="srvModel.status === 'new' && srvModel.txCount > 1">
            {{$t("NotPaid_ExtraTransaction")}}
        </div>
        <div class="line-items" v-bind:class="{ 'expanded': lineItemsExpanded}">
            <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 line-items_fiatvalue" v-if="srvModel.orderAmountFiat">
                <div class="line-items__item__label">&nbsp;</div>
                <div class="line-items__item__value single-item-order__right__ex-rate">
                    {{srvModel.orderAmountFiat}}
                </div>
            </div>
            <div class="line-items__item" v-show="srvModel.isMultiCurrency || srvModel.txCountForFee > 0">
                <div class="line-items__item__label">
                    <span>{{$t("Network Cost")}}</span>
                </div>
                <div class="line-items__item__value">
                    <span v-if="srvModel.isMultiCurrency">
                        {{ srvModel.networkFee }} {{ srvModel.cryptoCode }}
                    </span>
                    <span v-else-if="srvModel.txCountForFee > 0">
                        {{$t("txCount", {count: srvModel.txCount})}} x {{ srvModel.networkFee }} {{ srvModel.cryptoCode }}
                    </span>
                </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" v-show="parseFloat(srvModel.btcDue) > 0">
                <div class="line-items__item__label">{{$t("Due")}}</div>
                <div class="line-items__item__value">{{srvModel.btcDue}} {{ srvModel.cryptoCode }}</div>
            </div>
        </div>
    </line-items>
    <component v-if="srvModel.uiSettings && srvModel.uiSettings.checkoutHeaderVueComponentName && srvModel.activated"
               v-bind:srv-model="srvModel"
               v-bind:is="srvModel.uiSettings.checkoutHeaderVueComponentName">
    </component>
</div>

<div class="payment-box" v-bind:class="{ 'with-recommended-fee': showRecommendedFee && !showEmailForm }">
    <div class="bp-view enter-contact-email" id="emailAddressView" v-bind:class="{ 'active': showEmailForm}">
        <form class="manual__step-one refund-address-form contact-email-form" id="emailAddressForm" name="emailAddressForm" novalidate="" v-on:submit.prevent="onEmailSubmit">
            <div class="manual__step-one__header">
                <span>{{$t("Contact and Refund Email")}}</span>
            </div>
            <div class="manual__step-one__instructions">
                <span class="initial-label" v-show="!emailAddressInputInvalid">
                    <span>{{$t("Contact_Body")}}</span>
                </span>
                <span class="submission-error-label" v-show="emailAddressInputInvalid">{{$t("Please enter a valid email address")}}</span>
            </div>
            <div class="input-wrapper">
                <input class="bp-input email-input"
                       v-bind:class="{ 'ng-pristine ng-submitted ng-touched': !emailAddressInputDirty,  'ng-invalid form-input-invalid': emailAddressInputInvalid }" id="emailAddressFormInput"
                       v-bind:placeholder="$t('Your email')" type="email" v-model="emailAddressInput"
                       v-on:change="onEmailChange">
                <bp-loading-button>
                    <button type="submit" class="action-button" style="margin-top: 15px;" v-bind:disabled="emailAddressFormSubmitting" v-bind:class="{ 'loading': emailAddressFormSubmitting }">
                        <span class="button-text">{{$t("Continue")}}</span>
                        <div class="loader-wrapper">
                            @await Html.PartialAsync("~/Views/UIInvoice/Checkout-Spinner.cshtml")
                        </div>
                    </button>
                </bp-loading-button>
            </div>
        </form>
    </div>
    <div v-if="showPaymentUI">
        <component v-if="srvModel.uiSettings && srvModel.uiSettings.checkoutBodyVueComponentName && srvModel.activated"
                   v-bind:srv-model="srvModel"
                   v-bind:is="srvModel.uiSettings.checkoutBodyVueComponentName">
        </component>
    </div>

    <div class="bp-view" id="paid" v-bind:class="{ 'active': invoicePaid && !showEmailForm}">
        <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" asp-append-version="true">
                            </div>
                            <div class="status-icon__wrapper__outline"></div>
                        </div>
                    </div>
                </div>
                <div class="success-message">{{$t("This invoice has been paid")}}</div>
                <a v-if="srvModel.receiptLink" class="action-button" :href="srvModel.receiptLink" :target="isModal ? '_top' : null" v-html="$t('View receipt')" id="receipt-btn"></a> 
                <a v-if="storeLink" class="action-button" :href="storeLink" :target="isModal ? '_top' : null" v-html="$t('Return to StoreName', srvModel)"></a>
                <button v-else-if="isModal" class="action-button close-action" v-on:click="close" v-html="$t('Close')"></button>
            </div>
        </div>
        <div class="button-wrapper refund-address-form-container" id="refund-overpayment-button">
        </div>
    </div>

    <div class="bp-view expired" id="expired" v-bind:class="{ 'active': invoiceUnpayable}">
        <div>
            <div class="expired__body" style="margin-bottom: 20px;">
                <div class="expired__header">{{$t("What happened?")}}</div>
                <div class="expired__text" v-html="$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" style="overflow-wrap:break-word">
                    <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 class="action-button" :href="storeLink" v-show="storeLink">
                <span v-html="$t('Return to StoreName', srvModel)"></span>
            </a>
            <button class="action-button close-action" v-show="isModal" v-on:click="close">
                <span v-html="$t('Close')"></span>
            </button>
        </div>
    </div>
</div>