<div>
  <div id="product-focus-area"></div>
  <div v-if="productDetail && product" class="row">
    <div class="col-12 auto-width">
      <product-detail :product="product" @add-to-cart="addToCart"></product-detail>
    </div>

    <div class="col-12 q-my-lg">
      <q-separator></q-separator>
    </div>
  </div>
  <div class="row q-col-gutter-md">
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3" v-for="(item, idx) in products" :key="idx">
      <product-card :product="item" @change-page="changePageS" @add-to-cart="addToCart" :is-stall="true"></product-card>
    </div>
  </div>
  <!-- BEGIN CHECKOUT DIALOG -->
  <q-dialog v-model="checkoutDialog.show" position="top">
    <q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
      <q-form @submit="placeOrder" class="q-gutter-md">
        <q-input filled dense v-model.trim="checkoutDialog.data.username" label="Name (optional)"></q-input>
        <q-expansion-item v-if="!account" dense dense-toggle expand-separator icon="person_off" label="Not logged in?">
          <q-card>
            <q-card-section>
              It seems you haven't logged in. You can:
              <ol>
                <li>
                  enter your public and private keys below (to sign the order
                  message)
                </li>
                <li>use a Nostr Signer Extension (NIP07)</li>
                <li>
                  fill out the required fields and with your public key,
                  download the order and send as a direct message to the
                  merchant on any Nostr client
                </li>
              </ol>
            </q-card-section>
            <q-card-actions align="right">
              <q-btn v-if="hasNip07" unelevated @click="getFromExtension" color="primary"
                label="Get from Extension"><q-tooltip>Use a Nostr browser extension</q-tooltip></q-btn>
              <q-btn v-if="!this.account && !this.customerPubkey && !this.customerPrivkey" unelevated @click="makeLogin"
                color="primary" label="Login"></q-btn>
            </q-card-actions>
          </q-card>
        </q-expansion-item>
        <q-input filled dense :readonly="Boolean(customerPubkey)" v-model.trim="checkoutDialog.data.pubkey"
          label="Public key" hint="Enter your public key">
        </q-input>
        <q-input filled dense :readonly="Boolean(customerPrivkey)" :type="isPwd ? 'password' : 'text'"
          v-if="!customerUseExtension" v-model.trim="checkoutDialog.data.privkey" label="Private key (optional)"
          hint="Enter your private key">
          <template v-slot:append>
            <q-icon :name="isPwd ? 'visibility_off' : 'visibility'" class="cursor-pointer" @click="isPwd = !isPwd" />
          </template>
        </q-input>
        <q-input filled dense v-model.trim="checkoutDialog.data.address" label="Address (optional)"
          hint="If ordering a physical product make sure to fill this"></q-input>
        <q-input v-model="checkoutDialog.data.email" filled dense type="email" label="Email (optional)"
          hint="Merchant may not use email"></q-input>
        <q-input v-model="checkoutDialog.data.message" filled dense type="text" label="Message (optional)"></q-input>
        <p>Select the shipping zone:</p>
        <div class="row q-mt-lg">
          <q-select style="min-width: 200px" filled dense stack-label v-model="checkoutDialog.data.shippingzone"
            emit-value map-options :options="stall.shipping.map(s => ({label: s.countries.toString(), value: s.id}))"
            label="Shipping Zone" />
        </div>
        <div class="row q-mt-lg">
          Total: {{ stall.currency != 'sat' ? getAmountFormated(finalCost,
          stall.currency) : finalCost + 'sats' }}
        </div>
        <div class="row q-mt-lg">
          <q-btn v-if="!customerUseExtension && !checkoutDialog.data.privkey" :loading="loading" unelevated
            color="primary" :disable="checkoutDialog.data.shippingzone == null
              || checkoutDialog.data.pubkey == null" @click="downloadOrder">Download Order</q-btn>
          <q-btn v-else :loading="loading" unelevated color="primary" :disable="checkoutDialog.data.shippingzone == null
              || checkoutDialog.data.pubkey == null" type="submit">Checkout</q-btn>
          <q-btn v-close-popup flat @click="checkoutDialog = {show: false, data: {pubkey: null}}" color="grey"
            class="q-ml-auto">Cancel</q-btn>
        </div>
      </q-form>
    </q-card>
  </q-dialog>
  <!-- END CHECKOUT DIALOG -->
  <!-- INVOICE DIALOG -->
  <q-dialog v-model="qrCodeDialog.show" position="top" @hide="closeQrCodeDialog">
    <q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
      <div class="text-center q-mb-lg">
        <div class="q-my-lg" v-if="qrCodeDialog.data.message">
          <p>{{ qrCodeDialog.data.message }}</p>
        </div>
        <a v-else :href="'lightning:' + qrCodeDialog.data.payment_request">
          <q-responsive :ratio="1" class="q-mx-xl">
            <qrcode v-if="qrCodeDialog.data.payment_request" :value="qrCodeDialog.data.payment_request"
              :options="{width: 340}" class="rounded-borders"></qrcode>
          </q-responsive>
        </a>
        <q-inner-loading :showing="loading">
          <q-spinner-puff size="50px" color="primary" />
        </q-inner-loading>
      </div>
      <div class="row q-mt-lg">
        <q-btn v-if="qrCodeDialog.data.payment_request" outline color="grey"
          @click="copyText(qrCodeDialog.data.payment_request)">Copy invoice</q-btn>
        <q-btn @click="closeQrCodeDialog" flat color="grey" class="q-ml-auto">Close</q-btn>
      </div>
    </q-card>
  </q-dialog>
  <!-- ORDER DOWNLOAD DIALOG -->
  <q-dialog v-model="downloadOrderDialog.show" position="top">
    <q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
      <q-card-section>
        <div class="text-h6">Order data</div>
        <div class="text-subtitle1">Merchant pubkey</div>
        <div class="text-subtitle2" @click="copyText(stall.pubkey)">
          {{ `${stall.pubkey.slice(0,5)}...${stall.pubkey.slice(-5)}` }}
          <sup>
            <q-icon name="content_copy" style="color: #ccc; font-size: 1.2em" />
          </sup>
          <q-tooltip>Click to copy</q-tooltip>
        </div>
        <p>
          Send the below code as a message, to the merchant pubkey, in any
          Nostr client
        </p>
      </q-card-section>

      <q-separator dark inset />

      <q-card-section>
        <pre
          style="font-size: 0.65rem; overflow-x: auto"><code>{{JSON.stringify(downloadOrderDialog.data, null, 2)}}</code></pre>
      </q-card-section>
      <div class="row q-mt-lg">
        <q-btn outline color="primary" @click="copyText(JSON.stringify(downloadOrderDialog.data))">Copy order</q-btn>
        <q-btn v-close-popup flat color="grey" class="q-ml-auto">Close</q-btn>
      </div>
    </q-card>
  </q-dialog>
</div>