{% 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">
    <q-card>
      <q-card-section>
        <q-btn
          unelevated
          color="green-7"
          class="q-ma-lg"
          @click="openNewDialog()"
          >Add Spotify Jukebox</q-btn
        >
        <div class="row items-center no-wrap q-mb-md">
          <h5 class="text-subtitle1 q-my-none">Items</h5>
        </div>
        {% raw %}
        <q-table
          dense
          flat
          selection="multiple"
          :data="jukebox.items"
          row-key="id"
          no-data-label="No items for sale yet"
          :pagination="{rowsPerPage: 0}"
          :binary-state-sort="true"
        >
          <template v-slot:header="props">
            <q-tr :props="props">
              <q-th auto-width></q-th>
              <q-th auto-width>Name</q-th>
              <q-th auto-width>Description</q-th>
              <q-th auto-width>Image</q-th>
              <q-th auto-width>Price</q-th>
              <q-th auto-width></q-th>
            </q-tr>
          </template>
          <template v-slot:body="props">
            <q-tr :props="props">
              <q-td auto-width>
                <q-btn
                  unelevated
                  dense
                  size="xs"
                  :icon="props.row.enabled ? 'done' : 'block'"
                  :color="props.row.enabled ? 'green' : ($q.dark.isActive ? 'grey-7' : 'grey-5')"
                  type="a"
                  @click="toggleItem(props.row.id)"
                  target="_blank"
                ></q-btn>
              </q-td>
              <q-td auto-width class="text-center">{{ props.row.name }}</q-td>
              <q-td auto-width> {{ props.row.description }} </q-td>
              <q-td class="text-center" auto-width>
                <img
                  v-if="props.row.image"
                  :src="props.row.image"
                  style="height: 1.5em"
                />
              </q-td>
              <q-td class="text-center" auto-width>
                {{ props.row.price }} {{ props.row.unit }}
              </q-td>
              <q-td auto-width>
                <q-btn
                  flat
                  dense
                  size="xs"
                  @click="openUpdateDialog(props.row.id)"
                  icon="edit"
                  color="light-blue"
                ></q-btn>
                <q-btn
                  unelevated
                  dense
                  size="xs"
                  icon="delete"
                  color="negative"
                  type="a"
                  @click="deleteItem(props.row.id)"
                  target="_blank"
                ></q-btn>
              </q-td>
            </q-tr>
          </template>
        </q-table>
        {% endraw %}
      </q-card-section>
    </q-card>
  </div>

  <div class="col-12 col-md-5 q-gutter-y-md">
    <q-card>
      <q-card-section>
        <h6 class="text-subtitle1 q-my-none">LNbits jukebox extension</h6>
      </q-card-section>
      <q-card-section class="q-pa-none">
        <q-separator></q-separator>
        <q-list> {% include "jukebox/_api_docs.html" %} </q-list>
      </q-card-section>
    </q-card>
  </div>

  <q-dialog v-model="jukeboxDialog.show" position="top" @hide="closeFormDialog">
    <q-card class="q-pa-md q-pt-lg q-mt-md" style="width: 100%">
      <q-stepper
        v-model="step"
        active-color="green-7"
        inactive-color="green-10"
        vertical
        animated
      >
        <q-step
          :name="1"
          title="Pick wallet, price"
          icon="account_balance_wallet"
          :done="step > 1"
        >
          <q-input
            filled
            class="q-pt-md"
            dense
            v-model.trim="jukeboxDialog.data.title"
            label="Jukebox name"
          ></q-input>
          <q-select
            class="q-pb-md q-pt-md"
            filled
            dense
            emit-value
            v-model="jukeboxDialog.data.wallet"
            :options="g.user.walletOptions"
            label="Wallet to use"
          ></q-select>
          <q-input
            filled
            dense
            v-model.trim="jukeboxDialog.data.price"
            type="number"
            max="1440"
            label="Price per track"
            class="q-pb-lg"
          >
          </q-input>
          <div class="row">
            <div class="col-4">
              <q-btn
                v-if="jukeboxDialog.data.title != null && jukeboxDialog.data.price != null && jukeboxDialog.data.wallet != null"
                color="green-7"
                @click="step = 2"
                >Continue</q-btn
              >
              <q-btn v-else color="green-7" disable>Continue</q-btn>
            </div>
            <div class="col-8">
              <q-btn
                color="green-7"
                class="float-right"
                @click="closeFormDialog"
                >Cancel</q-btn
              >
            </div>
          </div>

          <br />
        </q-step>

        <q-step :name="2" title="Add api keys" icon="vpn_key" :done="step > 2">
          To use this extension you need a Spotify client ID and client secret.
          You get these by creating an app in the Spotify developers dashboard
          <a
            target="_blank"
            href="https://developer.spotify.com/dashboard/applications"
            >here</a
          >. <br />
          In the app go to edit-settings, set the redirect URI to this link
          (replacing the CLIENT-ID with your own) {% raw %}{{ locationcb
          }}CLIENT-ID{% endraw %}
          <q-input
            filled
            class="q-pb-md q-pt-md"
            dense
            v-model.trim="jukeboxDialog.data.sp_user"
            label="Client ID"
          ></q-input>

          <q-input
            dense
            v-model="jukeboxDialog.data.sp_secret"
            filled
            :type="isPwd ? 'password' : 'text'"
            label="Client secret"
          >
            <template #append>
              <q-icon
                :name="isPwd ? 'visibility_off' : 'visibility'"
                class="cursor-pointer"
                @click="isPwd = !isPwd"
              ></q-icon>
            </template>
          </q-input>

          <div class="row q-mt-md">
            <div class="col-4">
              <q-btn
                v-if="jukeboxDialog.data.sp_secret != null && jukeboxDialog.data.sp_user != null && tokenFetched"
                color="green-7"
                @click="submitSpotify"
                >Get token</q-btn
              >
              <q-btn v-else color="green-7" disable color="green-7"
                >Get token</q-btn
              >
            </div>
            <div class="col-8">
              <q-btn
                color="green-7"
                class="float-right"
                @click="closeFormDialog"
                >Cancel</q-btn
              >
            </div>
          </div>

          <br />
        </q-step>

        <q-step
          :name="3"
          title="Select playlists"
          icon="queue_music"
          active-color="green-8"
          :done="step > 3"
        >
          <q-select
            class="q-pb-md q-pt-md"
            filled
            dense
            emit-value
            v-model="jukeboxDialog.data.sp_device"
            :options="devices"
            label="Device jukebox will play to"
          ></q-select>
          <q-select
            class="q-pb-md"
            filled
            dense
            multiple
            emit-value
            v-model="jukeboxDialog.data.sp_playlists"
            :options="playlists"
            label="Playlists available to the jukebox"
          ></q-select>
          <div class="row q-mt-md">
            <div class="col-5">
              <q-btn color="green-7" @click="createJukebox"
                >Create Jukebox</q-btn
              >
            </div>
            <div class="col-7">
              <q-btn
                color="green-7"
                class="float-right"
                @click="closeFormDialog"
                >Cancel</q-btn
              >
            </div>
          </div>
        </q-step>
      </q-stepper>
    </q-card>
  </q-dialog>
</div>
{% endblock %} {% block scripts %} {{ window_vars(user) }}
<script src="https://cdn.jsdelivr.net/npm/pica@6.1.1/dist/pica.min.js"></script>
<script src="/jukebox/static/js/index.js"></script>
{% endblock %}