{% extends "public.html" %} {% block page %}
<q-layout view="hHh Lpr lff">
  <q-drawer v-model="drawer" side="left">
    <q-toolbar class="bg-primary text-white shadow-2">
      <q-toolbar-title>Settings</q-toolbar-title>
      <q-btn flat round dense icon="close" @click="drawer = !drawer"></q-btn>
    </q-toolbar>
    <div>
      <div v-if="account" class="bg-transparent q-ma-md">
        <q-avatar size="56px" class="q-mb-sm">
          <img
            :src="accountMetadata?.picture || '/nostrmarket/static/images/blank-avatar.webp'"
          />
        </q-avatar>
        {%raw%}
        <div class="text-weight-bold">
          {{ `${account.pubkey.slice(0, 5)}...${account.pubkey.slice(-5)}` }}
        </div>
        <div v-if="accountMetadata && accountMetadata.name">
          {{ accountMetadata.name }}
        </div>
        {%endraw%}
        <q-btn
          label="Delete data"
          class="q-mt-md"
          color="primary"
          @click="deleteAccount"
          ><q-tooltip>Delete account data</q-tooltip></q-btn
        >
      </div>
      <div v-else class="q-pa-md">
        <q-btn
          label="Login"
          class="q-mt-md"
          color="primary"
          @click="accountDialog.show = true"
          ><q-tooltip>Login or Create account</q-tooltip></q-btn
        >
      </div>
      <q-separator></q-separator>
    </div>
    <div class="q-pa-md">
      <q-list padding>
        <q-expansion-item
          expand-separator
          icon="perm_identity"
          label="Merchants"
          caption="Add/Remove pubkeys"
        >
          <q-card>
            <q-card-section>
              <q-input
                filled
                v-model="inputPubkey"
                @keydown.enter="addPubkey(null)"
                type="text"
                label="Pubkey/Npub"
                hint="Add merchants"
              >
                <q-btn @click="addPubkey(null)" dense flat icon="add"></q-btn>
              </q-input>
              <q-list class="q-mt-md">
                <q-item v-for="pub in Array.from(pubkeys)" :key="pub">
                  {%raw%}
                  <q-item-section avatar>
                    <q-avatar>
                      <img
                        v-if="profiles.get(pub) && profiles.get(pub)?.picture"
                        :src="profiles.get(pub).picture"
                      />
                      <img
                        v-else
                        src="/nostrmarket/static/images/blank-avatar.webp"
                      />
                    </q-avatar>
                  </q-item-section>
                  <q-item-section>
                    <q-item-label
                      v-if="profiles.get(pub) && profiles.get(pub)?.name"
                      >{{ profiles.get(pub).name }}</q-item-label
                    >
                    <q-item-label v-else
                      >{{ `${pub.slice(0, 5)}...${pub.slice(-5)}`
                      }}</q-item-label
                    >
                    <q-tooltip>{{ pub }}</q-tooltip>
                  </q-item-section>
                  <q-item-section side>
                    <q-btn
                      class="gt-xs"
                      size="12px"
                      flat
                      dense
                      round
                      icon="delete"
                      @click="removePubkey(pub)"
                    />
                  </q-item-section>
                  {%endraw%}
                </q-item>
              </q-list>
            </q-card-section>
          </q-card>
        </q-expansion-item>
        <q-expansion-item
          expand-separator
          icon="perm_identity"
          label="Relays"
          caption="Add/Remove relays"
        >
          <q-card>
            <q-card-section>
              <q-input
                filled
                v-model="inputRelay"
                @keydown.enter="addRelay"
                type="text"
                label="Relay URL"
                hint="Add relays"
              >
                <q-btn @click="addRelay" dense flat icon="add"></q-btn>
              </q-input>
              <q-list dense class="q-mt-md">
                <q-item v-for="url in Array.from(relays)" :key="url">
                  {%raw%}
                  <q-item-section>
                    <q-item-label>{{ url }}</q-item-label>
                  </q-item-section>
                  <q-item-section side>
                    <q-btn
                      class="gt-xs"
                      size="12px"
                      flat
                      dense
                      round
                      icon="delete"
                      @click="removeRelay(url)"
                    />
                  </q-item-section>
                  {%endraw%}
                </q-item>
              </q-list>
            </q-card-section>
          </q-card>
        </q-expansion-item>
      </q-list>
    </div>
  </q-drawer>
  <q-page-container>
    <div class="row q-mb-md">
      <div class="col-12 q-gutter-y-md">
        <q-toolbar>
          <q-btn flat round dense icon="menu" @click="drawer = !drawer"></q-btn>
          {%raw%}
          <q-toolbar-title style="text-transform: capitalize">
            {{ activePage }}
          </q-toolbar-title>
          {%endraw%}
          <q-space></q-space>
          <q-btn
            v-if="!activeStall"
            color="primary"
            label="Search"
            icon="travel_explore"
            @click="searchNostr = !searchNostr"
            ><q-tooltip>Search for products on Nostr</q-tooltip></q-btn
          >
          <q-input
            class="q-ml-md"
            standout
            square
            dense
            outlined
            clearable
            v-model.trim="searchText"
            label="Filter products"
          >
            <template v-slot:append>
              <q-icon v-if="!searchText" name="search" />
            </template>
          </q-input>
        </q-toolbar>
      </div>
    </div>
    <customer-stall
      v-if="!isLoading && activeStall"
      :stall="stalls.find(stall => stall.id == activeStall)"
      :products="filterProducts"
      :stall-products="products.filter(p => p.stall_id == activeStall)"
      :product-detail="activeProduct"
      :relays="relays"
      :account="account"
      :pool="pool"
      @login-dialog="openAccountDialog"
      @change-page="navigateTo"
    ></customer-stall>
    <customer-market
      v-else
      :search-nostr="searchNostr"
      :relays="relays"
      :products="filterProducts"
      @change-page="navigateTo"
      @update-data="updateData"
    ></customer-market>
  </q-page-container>
  <!-- ACCOUNT DIALOG -->
  <q-dialog v-model="accountDialog.show" persistent>
    <q-card style="min-width: 350px">
      <q-card-section class="row items-center q-pb-none">
        <div class="text-h6">Account Setup</div>
        <q-space></q-space>
        <q-btn icon="close" flat round dense v-close-popup></q-btn>
      </q-card-section>
      <q-card-section>
        <p>Type your Nostr private key or generate a new one.</p>
        <small> You can also use a Nostr-capable extension. </small>
      </q-card-section>

      <q-card-section class="q-pt-none">
        <q-input
          dense
          label="nsec/npub/hex"
          v-model="accountDialog.data.key"
          autofocus
          @keyup.enter="createAccount"
          :error="accountDialog.data.key && !isValidKey"
          hint="Enter you private key (recommended) or public key"
        ></q-input>

        <q-item tag="label">
          <q-item-section avatar top>
            <q-checkbox v-model="accountDialog.data.watchOnly"></q-checkbox>
          </q-item-section>
          <q-item-section>
            <q-item-label>Is this a Public Key?</q-item-label>
            <q-item-label caption>
              If not using an Nostr capable extension, you'll have to sign
              events manually! Better to use a Private Key that you can delete
              later, or just generate an ephemeral key pair to use in the
              Marketplace!
            </q-item-label>
          </q-item-section>
        </q-item>
      </q-card-section>

      <q-card-actions align="right" class="text-primary">
        <q-btn
          v-if="hasExtension"
          flat
          label="Use Public Key from Extension"
          @click="() => createAccount(true)"
        ></q-btn>
        <q-btn
          v-if="isValidKey"
          label="Add key"
          color="primary"
          @click="() => createAccount()"
        ></q-btn>
        <q-btn v-else flat label="Generate" @click="generateKeyPair"></q-btn>
      </q-card-actions>
    </q-card>
  </q-dialog>
</q-layout>
{% endblock %} {% block scripts %}
<script src="https://unpkg.com/nostr-tools/lib/nostr.bundle.js"></script>

<script src="{{ url_for('nostrmarket_static', path='js/utils.js') }}"></script>
<script src="{{ url_for('nostrmarket_static', path='components/product-card/product-card.js') }}"></script>
<script src="{{ url_for('nostrmarket_static', path='components/customer-market/customer-market.js') }}"></script>
<script src="{{ url_for('nostrmarket_static', path='components/customer-stall/customer-stall.js') }}"></script>
<script src="{{ url_for('nostrmarket_static', path='components/product-detail/product-detail.js') }}"></script>
<script src="{{ url_for('nostrmarket_static', path='components/shopping-cart/shopping-cart.js') }}"></script>
<script src="{{ url_for('nostrmarket_static', path='components/chat-dialog/chat-dialog.js') }}"></script>
<script src="{{ url_for('nostrmarket_static', path='js/market.js') }}"></script>
<style scoped>
  .q-field__native span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .chat-container {
    position: relative;
    display: grid;
    grid-template-rows: 1fr auto;
    /*height: calc(100vh - 200px);*/
    height: 70vh;
  }

  .chat-box {
    display: flex;
    flex-direction: column-reverse;
    padding: 1rem;
    overflow-y: auto;
    margin-left: auto;
    width: 50%;
  }

  .chat-messages {
    width: auto;
  }

  .chat-other {
  }

  .chat-input {
    position: relative;
    display: flex;
    align-items: end;
    margin-top: 1rem;
  }
</style>
{% endblock %}