{% extends "base.html" %} {% from "macros.jinja" import window_vars with context
%} {% block scripts %} {{ window_vars(user) }}
<script src="{{ static_url_for('access/static', 'js/index.js') }}"></script>
{% endblock %} {% 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 class="row items-center justify-between">
        <h5 class="text-subtitle1 q-my-none">Doors</h5>
        <q-btn unelevated color="primary" @click="doorDialog.show = true"
          >New door</q-btn
        >
      </q-card-section>
      <q-card-section class="q-pa-none">
        <q-table
          flat
          dense
          :rows="doors"
          row-key="id"
          :columns="doorCols"
          :pagination="{rowsPerPage: 0}"
          hide-bottom
        >
          <template v-slot:body="props">
            <q-tr :props="props">
              <q-td>{% raw %}{{ props.row.name }}{% endraw %}</q-td>
              <q-td class="text-caption"
                >{% raw %}{{ props.row.id }}{% endraw %}</q-td
              >
              <q-td>
                <q-badge :color="props.row.enabled ? 'green' : 'grey'"
                  >{% raw %}{{ props.row.enabled ? 'on' : 'off' }}{% endraw
                  %}</q-badge
                >
              </q-td>
              <q-td>
                <q-btn
                  flat
                  dense
                  size="sm"
                  icon="edit"
                  @click="editDoor(props.row)"
                  ><q-tooltip>Edit door</q-tooltip></q-btn
                >
                <q-btn
                  flat
                  dense
                  size="sm"
                  icon="vpn_key"
                  @click="showToken(props.row)"
                  ><q-tooltip>Controller token</q-tooltip></q-btn
                >
                <q-btn
                  flat
                  dense
                  size="sm"
                  color="negative"
                  icon="delete"
                  @click="deleteDoor(props.row.id)"
                ></q-btn>
              </q-td>
            </q-tr>
          </template>
        </q-table>
      </q-card-section>
    </q-card>

    <q-card>
      <q-card-section class="row items-center justify-between">
        <h5 class="text-subtitle1 q-my-none">Grants (card → door)</h5>
        <q-btn unelevated color="primary" @click="grantDialog.show = true"
          >New grant</q-btn
        >
      </q-card-section>
      <q-card-section class="q-pa-none">
        <q-table
          flat
          dense
          :rows="grants"
          row-key="id"
          :columns="grantCols"
          :pagination="{rowsPerPage: 0}"
          hide-bottom
        >
          <template v-slot:body="props">
            <q-tr :props="props">
              <q-td>{% raw %}{{ doorName(props.row.door_id) }}{% endraw %}</q-td>
              <q-td class="text-caption"
                >{% raw %}{{ props.row.external_id }}{% endraw %}</q-td
              >
              <q-td>{% raw %}{{ props.row.label }}{% endraw %}</q-td>
              <q-td>
                <q-btn
                  flat
                  dense
                  size="sm"
                  color="negative"
                  icon="delete"
                  @click="deleteGrant(props.row.id)"
                ></q-btn>
              </q-td>
            </q-tr>
          </template>
        </q-table>
      </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">Access log</h6>
      </q-card-section>
      <q-card-section class="q-pa-none">
        <q-table
          flat
          dense
          :rows="logs"
          row-key="id"
          :columns="logCols"
          :pagination="{rowsPerPage: 15}"
        >
          <template v-slot:body="props">
            <q-tr :props="props">
              <q-td class="text-caption"
                >{% raw %}{{ props.row.time }}{% endraw %}</q-td
              >
              <q-td>{% raw %}{{ doorName(props.row.door_id) }}{% endraw %}</q-td>
              <q-td>
                <q-badge
                  :color="props.row.decision === 'allow' ? 'green' : 'red'"
                  >{% raw %}{{ props.row.decision }}{% endraw %}</q-badge
                >
              </q-td>
              <q-td class="text-caption"
                >{% raw %}{{ props.row.reason }}{% endraw %}</q-td
              >
            </q-tr>
          </template>
        </q-table>
      </q-card-section>
    </q-card>
  </div>

  <q-dialog v-model="doorDialog.show">
    <q-card class="q-pa-lg" style="min-width: 420px">
      <h6 class="q-mt-none">
        {% raw %}{{ doorDialog.data.id ? 'Edit door' : 'New door' }}{% endraw %}
      </h6>
      <q-input
        v-model="doorDialog.data.name"
        label="Name"
        filled
        dense
      ></q-input>
      <q-input
        v-model="doorDialog.data.ha_webhook_url"
        label="Home Assistant webhook URL (local)"
        filled
        dense
        class="q-mt-sm"
      ></q-input>
      <q-input
        v-model="doorDialog.data.boltcards_base_url"
        label="boltcards API base (blank = this instance)"
        filled
        dense
        class="q-mt-sm"
      ></q-input>
      <q-input
        v-model.number="doorDialog.data.unlock_timeout_ms"
        type="number"
        label="Unlock timeout (ms)"
        filled
        dense
        class="q-mt-sm"
      ></q-input>
      <div class="row q-mt-md q-gutter-sm justify-end">
        <q-btn flat v-close-popup>Cancel</q-btn>
        <q-btn unelevated color="primary" @click="saveDoor"
          >{% raw %}{{ doorDialog.data.id ? 'Save' : 'Create' }}{% endraw %}</q-btn
        >
      </div>
    </q-card>
  </q-dialog>

  <q-dialog v-model="grantDialog.show">
    <q-card class="q-pa-lg" style="min-width: 420px">
      <h6 class="q-mt-none">New grant</h6>
      <q-select
        v-model="grantDialog.data.door_id"
        :options="doorOptions"
        label="Door"
        filled
        dense
        emit-value
        map-options
      ></q-select>
      <q-input
        v-model="grantDialog.data.external_id"
        label="Card external_id (from boltcards)"
        filled
        dense
        class="q-mt-sm"
      ></q-input>
      <q-input
        v-model="grantDialog.data.label"
        label="Label (optional)"
        filled
        dense
        class="q-mt-sm"
      ></q-input>
      <div class="row q-mt-md q-gutter-sm justify-end">
        <q-btn flat v-close-popup>Cancel</q-btn>
        <q-btn unelevated color="primary" @click="createGrant">Create</q-btn>
      </div>
    </q-card>
  </q-dialog>
</div>
{% endblock %}