{% 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-8 col-lg-9 q-gutter-y-md">
    <q-card>
      <q-card-section class="row items-center justify-between">
        <div>
          <span class="text-h6">Your Restaurants</span>
          <div class="text-caption text-grey-6">
            One LNbits wallet can host many restaurants. Create one per
            kitchen / location.
          </div>
        </div>
        <q-btn unelevated color="primary" icon="add" @click="openRestaurantDialog">
          New restaurant
        </q-btn>
      </q-card-section>

      <q-separator></q-separator>

      <q-card-section v-if="restaurants.length === 0">
        <div class="text-grey-6 text-italic">
          No restaurants yet. Click "New restaurant" to get started.
        </div>
      </q-card-section>

      <q-list separator v-else>
        <q-item
          v-for="r in restaurants"
          :key="r.id"
          clickable
          :to="`/restaurant/${r.slug}`"
        >
          <q-item-section avatar>
            <q-avatar v-if="r.logo_url">
              <img :src="r.logo_url" />
            </q-avatar>
            <q-avatar v-else color="primary" text-color="white" icon="restaurant"></q-avatar>
          </q-item-section>
          <q-item-section>
            <q-item-label v-text="r.name"></q-item-label>
            <q-item-label caption>
              <span v-text="r.slug"></span>
              <q-badge
                v-if="r.is_open"
                color="positive"
                class="q-ml-sm"
                label="Open"
              ></q-badge>
              <q-badge v-else color="grey" class="q-ml-sm" label="Closed"></q-badge>
              <q-badge
                v-if="r.nostr_pubkey"
                color="purple"
                class="q-ml-sm"
                icon="hub"
                label="Nostr"
              ></q-badge>
            </q-item-label>
          </q-item-section>
          <q-item-section side>
            <q-btn
              flat
              dense
              icon="settings"
              :to="`/restaurant/${r.slug}/settings`"
              @click.stop
            ></q-btn>
          </q-item-section>
        </q-item>
      </q-list>
    </q-card>
  </div>

  <div class="col-12 col-md-4 col-lg-3 q-gutter-y-md">
    <q-card>
      <q-card-section>
        <h6 class="q-my-none">{{ SITE_TITLE }} Restaurant CMS</h6>
      </q-card-section>
      <q-separator></q-separator>
      <q-card-section class="text-caption text-grey-7">
        Build menus, manage modifiers and inventory, and watch orders
        in real time. Customer-facing UI lives in the AIO webapp;
        this is the operator console.
      </q-card-section>
    </q-card>
  </div>
</div>

<!-- ===================== New restaurant dialog ===================== -->
<q-dialog v-model="restaurantDialog.show" persistent>
  <q-card class="q-pa-md" style="width: 500px; max-width: 95vw">
    <h6 class="q-my-none">New restaurant</h6>
    <q-form @submit="createRestaurant" class="q-gutter-md q-mt-sm">
      <q-input
        filled
        dense
        v-model.trim="restaurantDialog.data.name"
        label="Name"
        :rules="[val => !!val || 'Required']"
      ></q-input>
      <q-input
        filled
        dense
        v-model.trim="restaurantDialog.data.slug"
        label="Slug (used in URLs)"
        hint="lowercase, no spaces; e.g. emporium"
        :rules="[
          val => !!val || 'Required',
          val => /^[a-z0-9-]+$/.test(val) || 'lowercase, digits, dashes'
        ]"
      ></q-input>
      <q-input
        filled
        dense
        v-model="restaurantDialog.data.description"
        label="Short description"
        type="textarea"
        rows="2"
      ></q-input>
      <q-input
        filled
        dense
        v-model.trim="restaurantDialog.data.location"
        label="Location"
        hint="freeform; e.g. San Marcos La Laguna, GT"
      ></q-input>
      <q-select
        filled
        dense
        v-model="restaurantDialog.data.wallet"
        :options="g.user.walletOptions"
        label="Receiving wallet"
        emit-value
        map-options
      ></q-select>
      <div class="row justify-end q-gutter-sm">
        <q-btn flat label="Cancel" @click="restaurantDialog.show = false"></q-btn>
        <q-btn unelevated color="primary" type="submit" label="Create"></q-btn>
      </div>
    </q-form>
  </q-card>
</q-dialog>
{% endblock %} {% block scripts %} {{ window_vars(user) }}
<script src="{{ static_url_for('restaurant/static', path='js/api.js') }}"></script>
<script src="{{ static_url_for('restaurant/static', path='js/index.js') }}"></script>
{% endblock %}