{% 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 q-gutter-y-md">
    <div v-if="merchant && merchant.id">
      <q-card>
        <q-card-section>
          <div class="row">
            <div class="col-2">
              <merchant-details
                :merchant-id="merchant.id"
                :inkey="g.user.wallets[0].inkey"
                :adminkey="g.user.wallets[0].adminkey"
                @show-keys="toggleMerchantKeys"
                @merchant-deleted="handleMerchantDeleted"
              ></merchant-details>
            </div>
            <div class="col-8"></div>
            <div class="col-2">
              <shipping-zones
                :inkey="g.user.wallets[0].inkey"
                :adminkey="g.user.wallets[0].adminkey"
                class="float-right"
              ></shipping-zones>
            </div>
          </div>
        </q-card-section>
        <q-card-section v-if="showKeys">
          <div class="row q-mb-md">
            <div class="col">
              <q-btn
                unelevated
                color="gray"
                outline
                @click="showKeys = false"
                class="float-left"
                >Hide Keys</q-btn
              >
            </div>
          </div>

          <div class="row">
            <div class="col">
              <key-pair
                :public-key="merchant.public_key"
                :private-key="merchant.private_key"
              ></key-pair>
            </div>
          </div>
        </q-card-section>
      </q-card>
      <q-card class="q-mt-lg">
        <q-card-section>
          <stall-list
            :adminkey="g.user.wallets[0].adminkey"
            :inkey="g.user.wallets[0].inkey"
            :wallet-options="g.user.walletOptions"
            @customer-selected-for-order="customerSelectedForOrder"
          ></stall-list>
        </q-card-section>
      </q-card>
      <q-card class="q-mt-lg">
        <q-card-section>
          <div class="row">
            <div class="col-12">
              <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>
            </div>
          </div>
        </q-card-section>
      </q-card>
    </div>
    <q-card v-else>
      <q-card-section>
        <span class="text-h4">Wellcome 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 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">
          <q-btn
            label="Restart Nostr Connection"
            color="pink"
            @click="restartNostrConnection"
          >
            <q-tooltip>
              Restart the connection to the nostrclient extension
            </q-tooltip>
          </q-btn>
        </q-card-section>
      </q-card>
    </div>
    <div class="col-12">
      <q-card>
        <q-card-section>
          <h6 class="text-subtitle1 q-my-none">
            {{SITE_TITLE}} Nostr Market Extension
          </h6>
        </q-card-section>
        <q-card-section class="q-pa-none">
          <q-separator></q-separator>
          <q-list> {% include "nostrmarket/_api_docs.html" %} </q-list>
        </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"
        @customer-selected="filterOrdersForCustomer"
      >
      </direct-messages>
    </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>
</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%;
  }
</style>

<!-- todo: serve locally -->
<script src="https://unpkg.com/nostr-tools/lib/nostr.bundle.js"></script>
<script src="https://cdn.jsdelivr.net/npm/pica@6.1.1/dist/pica.min.js"></script>

<script src="{{ url_for('nostrmarket_static', path='js/utils.js') }}"></script>
<script src="{{ url_for('nostrmarket_static', path='components/key-pair/key-pair.js') }}"></script>
<script src="{{ url_for('nostrmarket_static', path='components/shipping-zones/shipping-zones.js') }}"></script>
<script src="{{ url_for('nostrmarket_static', path='components/stall-details/stall-details.js') }}"></script>
<script src="{{ url_for('nostrmarket_static', path='components/stall-list/stall-list.js') }}"></script>
<script src="{{ url_for('nostrmarket_static', path='components/order-list/order-list.js') }}"></script>
<script src="{{ url_for('nostrmarket_static', path='components/direct-messages/direct-messages.js') }}"></script>
<script src="{{ url_for('nostrmarket_static', path='components/merchant-details/merchant-details.js') }}"></script>
<script src="{{ url_for('nostrmarket_static', path='js/index.js') }}"></script>

{% endblock %}