{% 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="red" @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-expansion-item expand-separator icon="perm_identity" label="Marketplace" caption="Marketplace info">
          <q-card>
            <q-card-section>
              <q-list class="q-mt-md">
                <q-item-label header>Information</q-item-label>
                <q-item>
                  {%raw%}
                  <q-item-section>
                    <q-item-label>Marketplace name</q-item-label>
                    <q-item-label caption>{{ config?.opts?.name }}</q-item-label>
                  </q-item-section>
                  {%endraw%}
                </q-item>
                <q-item>
                  {%raw%}
                  <q-item-section>
                    <q-item-label>About the marketplace</q-item-label>
                    <q-item-label caption>{{ config?.opts?.about }}</q-item-label>
                  </q-item-section>
                  {%endraw%}
                </q-item>
                <q-item-label header>UI Config</q-item-label>
                <q-item>
                  {%raw%}
                  <q-item-section>
                    <q-item-label>Logo</q-item-label>
                    <q-item-label caption>{{ config?.opts?.ui?.picture }}</q-item-label>
                  </q-item-section>
                  {%endraw%}
                </q-item>
                <q-item>
                  {%raw%}
                  <q-item-section>
                    <q-item-label>Banner URL</q-item-label>
                    <q-item-label caption>{{ config?.opts?.ui?.banner }}</q-item-label>
                  </q-item-section>
                  {%endraw%}
                </q-item>
                <q-item>
                  {%raw%}
                  <q-item-section>
                    <q-item-label>Theme</q-item-label>
                    <q-item-label caption>{{ config?.opts?.ui?.theme }}</q-item-label>
                  </q-item-section>
                  {%endraw%}
                </q-item>
              </q-list>
            </q-card-section>
            <q-card-actions class="q-mx-md" align="right">
              <q-btn v-if="naddr" label="Naddr" class="q-mt-md" color="primary" @click="copyText(naddr)"><q-tooltip>Copy
                  the
                  naddr for this configuration</q-tooltip></q-btn>
              <q-btn v-if="naddr && canEditConfig" label="Edit" class="q-mt-md" color="primary"
                @click="editConfigDialog"><q-tooltip>Edit configuration</q-tooltip></q-btn>
              <q-btn label="New" class="q-mt-md" color="primary" @click="openConfigDialog"><q-tooltip>Create a new
                  configuration</q-tooltip></q-btn>
            </q-card-actions>
          </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" :styles="config?.opts ?? {}"
      @login-dialog="openAccountDialog" @change-page="navigateTo"></customer-stall>
    <customer-market v-else :search-nostr="searchNostr" :relays="relays" :products="filterProducts"
      :styles="config?.opts ?? {}" @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>
  <!-- Config/Naddr Dialog -->
  <q-dialog v-model="configDialog.show" position="top">
    <q-card>
      <q-card-section class="row items-center q-pb-none">
        <div class="text-h6">Customize the Marketplace</div>
      </q-card-section>
      <q-card-section>
        <p>Create an Nostr event with Market info</p>
        <small> It will include all merchants on your merchants list and relays </small>
      </q-card-section>

      <q-card-section class="q-pt-none">
        <q-form @submit="sendConfig" class="q-gutter-md">
          <q-input filled dense v-model.trim="configDialog.data.name" label="Marketplace Name"></q-input>
          <q-input filled dense v-model.trim="configDialog.data.about" label="Description"></q-input>
          <p>Customize UI</p>
          <q-input filled dense v-model.trim="configDialog.data.ui.picture" label="Marketplace Logo"
            hint="URL to a logo image"></q-input>
          <q-input filled dense v-model.trim="configDialog.data.ui.banner" label="Marketplace banner"
            hint="URL to a header/banner image (max. 250px height)"></q-input>
          <q-select filled dense v-model="configDialog.data.ui.theme" :options="g.allowedThemes" label="Theme">
            <template v-slot:prepend>
              <q-icon name="palette" />
            </template>
          </q-select>
          <div class="row q-mt-lg">
            <q-btn unelevated color="primary" type="submit">Publish</q-btn>
            <q-btn v-close-popup flat color="grey" class="q-ml-auto">Cancel</q-btn>
          </div>
        </q-form>
    </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;
  }

  .q-item__label--caption {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
</style>
{% endblock %}