{% extends "base.html" %} {% from "macros.jinja" import window_vars with context
%} {% block page %}
<div class="row q-col-gutter-md">
  <div class="col-12 col-md-7 col-lg-8 q-gutter-y-md">
    <div v-if="merchant && merchant.id">
      <q-card>
        <div class="row items-center no-wrap">
          <q-tabs
            v-model="activeTab"
            class="text-grey col"
            active-color="primary"
            indicator-color="primary"
            align="left"
          >
            <q-tab
              name="orders"
              label="Orders"
              icon="receipt_long"
              style="min-width: 120px"
            ></q-tab>
            <q-tab
              name="merchant"
              label="Merchant"
              icon="person"
              style="min-width: 120px"
            ></q-tab>
            <q-tab
              name="shipping"
              label="Shipping"
              icon="local_shipping"
              style="min-width: 120px"
            ></q-tab>
            <q-tab
              name="stalls"
              label="Stalls"
              icon="store"
              style="min-width: 120px"
            ></q-tab>
            <q-tab
              name="products"
              label="Products"
              icon="inventory_2"
              style="min-width: 120px"
            ></q-tab>
          </q-tabs>
        </div>

        <q-separator></q-separator>

        <q-tab-panels v-model="activeTab" animated>
          <!-- Orders Tab -->
          <q-tab-panel name="orders">
            <q-card-section>
              <div class="text-h6">Orders</div>
            </q-card-section>
            <q-separator></q-separator>
            <q-card-section class="q-pt-none">
              <order-list
                ref="orderListRef"
                :adminkey="g.user.wallets[0].adminkey"
                :inkey="g.user.wallets[0].inkey"
                :customer-pubkey-filter="orderPubkey"
                @customer-selected="customerSelectedForOrder"
              ></order-list>
            </q-card-section>
          </q-tab-panel>

          <!-- Merchant Tab -->
          <q-tab-panel name="merchant">
            <merchant-tab
              :merchant-id="merchant.id"
              :inkey="g.user.wallets[0].inkey"
              :adminkey="g.user.wallets[0].adminkey"
              :show-keys="showKeys"
              :merchant-active="merchant.config.active"
              :public-key="merchant.public_key"
              :private-key="merchant.private_key"
              :is-admin="g.user.admin"
              :merchant-config="merchant.config"
              @toggle-show-keys="toggleShowKeys"
              @hide-keys="showKeys = false"
              @merchant-deleted="handleMerchantDeleted"
              @toggle-merchant-state="toggleMerchantState"
              @restart-nostr-connection="restartNostrConnection"
              @import-key="showImportKeysDialog"
              @generate-key="generateKeys"
              @profile-updated="getMerchant"
            ></merchant-tab>
          </q-tab-panel>

          <!-- Shipping Tab -->
          <q-tab-panel name="shipping">
            <shipping-zones-list
              :inkey="g.user.wallets[0].inkey"
              :adminkey="g.user.wallets[0].adminkey"
            ></shipping-zones-list>
          </q-tab-panel>

          <!-- Stalls Tab -->
          <q-tab-panel name="stalls">
            <stall-list
              :adminkey="g.user.wallets[0].adminkey"
              :inkey="g.user.wallets[0].inkey"
              :wallet-options="g.user.walletOptions"
              @customer-selected-for-order="customerSelectedForOrder"
              @go-to-products="goToProducts"
              @go-to-orders="goToOrders"
              @stalls-updated="stallCount = $event"
            ></stall-list>
          </q-tab-panel>

          <!-- Products Tab -->
          <q-tab-panel name="products">
            <product-list
              :adminkey="g.user.wallets[0].adminkey"
              :inkey="g.user.wallets[0].inkey"
              :stall-filter="selectedStallFilter"
              @clear-filter="selectedStallFilter = null"
            ></product-list>
          </q-tab-panel>

          <!-- Messages Tab -->
        </q-tab-panels>
      </q-card>
    </div>
    <q-card v-else>
      <q-card-section>
        <span class="text-h4">Welcome to Nostr Market!</span><br />
        In Nostr Market, merchant and customer communicate via NOSTR relays, so
        loss of money, product information, and reputation become far less
        likely if attacked.
      </q-card-section>
      <q-card-section>
        <span class="text-h4">Terms</span><br />
        <ul>
          <li>
            <span class="text-bold">merchant</span> - seller of products with
            NOSTR key-pair
          </li>
          <li>
            <span class="text-bold">customer</span> - buyer of products with
            NOSTR key-pair
          </li>
          <li>
            <span class="text-bold">product</span> - item for sale by the
            merchant
          </li>
          <li>
            <span class="text-bold">stall</span> - list of products controlled
            by merchant (a merchant can have multiple stalls)
          </li>
          <li>
            <span class="text-bold">marketplace</span> - clientside software for
            searching stalls and purchasing products
          </li>
        </ul>
      </q-card-section>
      <q-card-section>
        <div class="row">
          <div class="col-12">
            <q-btn
              @click="showImportKeysDialog"
              label="Import Key"
              color="primary"
              class="float-left"
            >
              <q-tooltip> Use an existing private key (hex or npub) </q-tooltip>
            </q-btn>
            <q-btn
              label="Generate New Key"
              color="green"
              @click="generateKeys"
              class="float-right"
            >
              <q-tooltip> A new key pair will be generated for you </q-tooltip>
            </q-btn>
          </div>
        </div>
      </q-card-section>
    </q-card>
  </div>

  <div class="col-12 col-md-5 col-lg-4 q-gutter-y-md">
    <div v-if="g.user.admin" class="col-12 q-mb-lg">
      <q-card>
        <q-card-section class="q-pa-md">
          <div class="row items-center no-wrap q-col-gutter-sm">
            <div class="col">
              <q-btn-dropdown
                :color="nostrStatusColor"
                :label="nostrStatusLabel"
                icon="sync"
                split
                @click="restartNostrConnection"
              >
                <q-list>
                  <q-item
                    clickable
                    v-close-popup
                    @click="restartNostrConnection"
                  >
                    <q-item-section avatar>
                      <q-icon name="refresh" color="primary"></q-icon>
                    </q-item-section>
                    <q-item-section>
                      <q-item-label>Restart Connection</q-item-label>
                      <q-item-label caption>
                        Reconnect to the nostrclient extension
                      </q-item-label>
                    </q-item-section>
                  </q-item>
                  <q-item
                    clickable
                    v-close-popup
                    @click="checkNostrStatus(true)"
                  >
                    <q-item-section avatar>
                      <q-icon name="wifi_find" color="primary"></q-icon>
                    </q-item-section>
                    <q-item-section>
                      <q-item-label>Check Status</q-item-label>
                      <q-item-label caption>
                        Check connection to nostrclient
                      </q-item-label>
                    </q-item-section>
                  </q-item>
                  <q-separator></q-separator>
                  <q-item>
                    <q-item-section>
                      <q-item-label caption>
                        <strong>Status:</strong>
                        <q-badge
                          :color="nostrStatus.connected ? 'green' : 'red'"
                          class="q-ml-xs"
                          v-text="nostrStatus.connected ? 'Connected' : 'Disconnected'"
                        ></q-badge>
                      </q-item-label>
                      <q-item-label
                        v-if="nostrStatus.relays_total > 0"
                        caption
                        class="q-mt-xs"
                      >
                        <strong>Relays:</strong>&nbsp;
                        <span v-text="nostrStatus.relays_connected"></span>
                        of
                        <span v-text="nostrStatus.relays_total"></span>
                        connected
                      </q-item-label>
                      <q-item-label
                        v-if="nostrStatus.error"
                        caption
                        class="text-negative q-mt-xs"
                        v-text="nostrStatus.error"
                      ></q-item-label>
                    </q-item-section>
                  </q-item>
                </q-list>
              </q-btn-dropdown>
            </div>
            <div class="col-auto">
              <div class="inline-block">
                <q-btn-dropdown
                  color="primary"
                  label="Publish"
                  icon="publish"
                  unelevated
                  :disable="stallCount === 0"
                >
                  <q-list>
                    <q-item clickable v-close-popup @click="publishNip15">
                      <q-item-section avatar>
                        <q-icon name="store" />
                      </q-item-section>
                      <q-item-section>
                        <q-item-label>Publish NIP-15</q-item-label>
                        <q-item-label caption
                          >Publish stalls and products</q-item-label
                        >
                      </q-item-section>
                    </q-item>
                    <q-item disable>
                      <q-item-section avatar>
                        <q-icon name="sell" color="grey" />
                      </q-item-section>
                      <q-item-section>
                        <q-item-label class="text-grey"
                          >Publish NIP-99</q-item-label
                        >
                        <q-item-label caption
                          >Classified listings (coming soon)</q-item-label
                        >
                      </q-item-section>
                    </q-item>
                    <q-separator />
                    <q-item clickable v-close-popup @click="refreshNip15">
                      <q-item-section avatar>
                        <q-icon name="refresh" />
                      </q-item-section>
                      <q-item-section>
                        <q-item-label>Refresh NIP-15 from Nostr</q-item-label>
                        <q-item-label caption
                          >Sync stalls and products</q-item-label
                        >
                      </q-item-section>
                    </q-item>
                    <q-item disable>
                      <q-item-section avatar>
                        <q-icon name="refresh" color="grey" />
                      </q-item-section>
                      <q-item-section>
                        <q-item-label class="text-grey"
                          >Refresh NIP-99 from Nostr</q-item-label
                        >
                        <q-item-label caption
                          >Classified listings (coming soon)</q-item-label
                        >
                      </q-item-section>
                    </q-item>
                    <q-separator />
                    <q-item clickable v-close-popup @click="deleteNip15">
                      <q-item-section avatar>
                        <q-icon name="delete_forever" color="negative" />
                      </q-item-section>
                      <q-item-section>
                        <q-item-label class="text-negative"
                          >Delete NIP-15 from Nostr</q-item-label
                        >
                        <q-item-label caption
                          >Remove stalls and products</q-item-label
                        >
                      </q-item-section>
                    </q-item>
                    <q-item disable>
                      <q-item-section avatar>
                        <q-icon name="delete_forever" color="grey" />
                      </q-item-section>
                      <q-item-section>
                        <q-item-label class="text-grey"
                          >Delete NIP-99 from Nostr</q-item-label
                        >
                        <q-item-label caption
                          >Classified listings (coming soon)</q-item-label
                        >
                      </q-item-section>
                    </q-item>
                  </q-list>
                </q-btn-dropdown>
                <q-tooltip v-if="stallCount === 0">
                  First create a stall and add products.
                </q-tooltip>
              </div>
            </div>
          </div>
        </q-card-section>
      </q-card>
    </div>
    <div v-if="merchant && merchant.id" class="col-12">
      <direct-messages
        ref="directMessagesRef"
        :inkey="g.user.wallets[0].inkey"
        :adminkey="g.user.wallets[0].adminkey"
        :active-chat-customer="activeChatCustomer"
        :merchant-id="merchant.id"
        @customer-selected="filterOrdersForCustomer"
        @order-selected="showOrderDetails"
      >
      </direct-messages>
    </div>
    <div class="col-12">
      <q-card>
        <q-expansion-item
          icon="info"
          label="Details"
          header-class="text-grey"
          expand-separator
        >
          <q-img
            src="/nostrmarket/static/market/images/nostr-cover.png"
            :ratio="3"
            fit="cover"
          ></q-img>
          <q-card-section>
            <div class="text-h6 q-mb-sm">Nostr Market</div>
            <div class="text-body2 text-grey">
              A decentralized marketplace extension for LNbits implementing the
              NIP-15 protocol. Create stalls, list products, and accept
              Lightning payments while communicating with customers via
              encrypted Nostr direct messages.
            </div>
          </q-card-section>
          <q-card-section class="q-pa-none">
            <q-list> {% include "nostrmarket/_api_docs.html" %} </q-list>
          </q-card-section>
        </q-expansion-item>
      </q-card>
    </div>
  </div>

  <div>
    <q-dialog v-model="importKeyDialog.show" position="top">
      <q-card class="q-pa-lg q-pt-xl" style="width: 500px">
        <q-form @submit="importKeys" class="q-gutter-md">
          <q-input
            filled
            dense
            v-model.trim="importKeyDialog.data.privateKey"
            label="Private Key (hex or nsec)"
          ></q-input>
          <div class="row q-mt-lg">
            <q-btn
              unelevated
              color="primary"
              :disable="!importKeyDialog.data.privateKey"
              type="submit"
              >Import</q-btn
            >
            <q-btn v-close-popup flat color="grey" class="q-ml-auto"
              >Cancel</q-btn
            >
          </div>
        </q-form>
      </q-card>
    </q-dialog>
  </div>

  <!-- Generate Key Dialog -->
  <q-dialog v-model="generateKeyDialog.show" position="top">
    <q-card class="q-pa-lg q-pt-xl" style="width: 500px">
      <div class="text-h6 q-mb-md">Generate New Key</div>
      <div class="q-mb-md">
        <div class="text-subtitle2 q-mb-xs">Public Key (npub)</div>
        <q-input :model-value="generateKeyDialog.npub" readonly dense outlined>
          <template v-slot:append>
            <q-btn
              flat
              dense
              icon="content_copy"
              @click="copyText(generateKeyDialog.npub, 'npub copied!')"
            ></q-btn>
          </template>
        </q-input>
      </div>
      <div class="q-mb-md">
        <div class="text-subtitle2 q-mb-xs text-warning">
          <q-icon name="warning" size="xs"></q-icon>
          Private Key (nsec)
        </div>
        <q-input
          :model-value="generateKeyDialog.showNsec ? generateKeyDialog.nsec : '••••••••••••••••••••••••••••••••••••••••••••••'"
          readonly
          dense
          outlined
        >
          <template v-slot:append>
            <q-btn
              flat
              dense
              :icon="generateKeyDialog.showNsec ? 'visibility_off' : 'visibility'"
              @click="generateKeyDialog.showNsec = !generateKeyDialog.showNsec"
            ></q-btn>
            <q-btn
              flat
              dense
              icon="content_copy"
              @click="copyText(generateKeyDialog.nsec, 'nsec copied! Keep it safe!')"
            ></q-btn>
          </template>
        </q-input>
        <div class="text-caption text-negative q-mt-xs">
          <q-icon name="error" size="xs"></q-icon>
          Never share your private key!
        </div>
      </div>
      <div class="row q-mt-lg">
        <q-btn unelevated color="primary" @click="confirmGenerateKey"
          >Create Merchant</q-btn
        >
        <q-btn v-close-popup flat color="grey" class="q-ml-auto">Cancel</q-btn>
      </div>
    </q-card>
  </q-dialog>
</div>
{% endblock%}{% block scripts %} {{ window_vars(user) }}

<style scoped>
  .chat-container {
    position: relative;
    display: grid;
    grid-template-rows: 1fr auto;
    height: 50vh;
  }

  .chat-box {
    padding: 1rem;
    overflow-y: auto;
    margin-left: auto;
    width: 100%;
  }

  .profile-avatar {
    border: 3px solid var(--q-dark-page);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  }

  .profile-avatar .q-avatar__content {
    overflow: hidden;
    border-radius: 50%;
  }
</style>

<template id="nostr-keys-dialog"
  >{% include("nostrmarket/components/nostr-keys-dialog.html") %}</template
>
<template id="edit-profile-dialog"
  >{% include("nostrmarket/components/edit-profile-dialog.html") %}</template
>
<template id="shipping-zones"
  >{% include("nostrmarket/components/shipping-zones.html") %}</template
>
<template id="stall-details"
  >{% include("nostrmarket/components/stall-details.html") %}</template
>
<template id="stall-list"
  >{% include("nostrmarket/components/stall-list.html") %}</template
>
<template id="order-list"
  >{% include("nostrmarket/components/order-list.html") %}</template
><template id="direct-messages"
  >{% include("nostrmarket/components/direct-messages.html") %}</template
>

<template id="merchant-details"
  >{% include("nostrmarket/components/merchant-details.html") %}</template
>
<template id="merchant-tab"
  >{% include("nostrmarket/components/merchant-tab.html") %}</template
>
<template id="shipping-zones-list"
  >{% include("nostrmarket/components/shipping-zones-list.html") %}</template
>
<template id="product-list"
  >{% include("nostrmarket/components/product-list.html") %}</template
>

<script src="{{ url_for('nostrmarket_static', path='js/nostr.bundle.js') }}"></script>
<script src="{{ url_for('nostrmarket_static', path='js/utils.js') }}"></script>
<script src="{{ url_for('nostrmarket_static', path='js/index.js') }}"></script>

<script src="{{ static_url_for('nostrmarket/static', 'components/nostr-keys-dialog.js') }}"></script>
<script src="{{ static_url_for('nostrmarket/static', 'components/edit-profile-dialog.js') }}"></script>
<script src="{{ static_url_for('nostrmarket/static', 'components/shipping-zones.js') }}"></script>
<script src="{{ static_url_for('nostrmarket/static', 'components/stall-details.js') }}"></script>
<script src="{{ static_url_for('nostrmarket/static', 'components/stall-list.js') }}"></script>
<script src="{{ static_url_for('nostrmarket/static', 'components/order-list.js') }}"></script>
<script src="{{ static_url_for('nostrmarket/static', 'components/direct-messages.js') }}"></script>
<script src="{{ static_url_for('nostrmarket/static', 'components/merchant-details.js') }}"></script>
<script src="{{ static_url_for('nostrmarket/static', 'components/merchant-tab.js') }}"></script>
<script src="{{ static_url_for('nostrmarket/static', 'components/shipping-zones-list.js') }}"></script>
<script src="{{ static_url_for('nostrmarket/static', 'components/product-list.js') }}"></script>

{% endblock %}