{% extends "conjunto/app_base.html" %}
{% load i18n shortcuts %}

{% block page_title %}{% translate "Keyboard shortcuts" %}{% endblock %}
{% block page_pretitle %}{% if audience == "vendor" %}{% translate "Vendor administration" %}{% else %}{% translate "Tenant administration" %}{% endif %}{% endblock %}

{% block content %}
<form id="shortcuts-admin-form"
      method="post"
      hx-post=""
      hx-target="this"
      hx-swap="outerHTML">
  {% csrf_token %}

  <div class="card">
    <div class="card-header d-flex align-items-center">
      <div class="card-title">{% translate "Effective shortcuts at this scope" %}</div>
      <div class="ms-auto">
        <button type="submit" class="btn btn-sm btn-primary">
          <i class="ti ti-device-floppy fs-3 me-1"></i>{% translate "Save" %}
        </button>
      </div>
    </div>
    <div class="card-body p-0">
      {% regroup rows by category as grouped %}
      {% for group in grouped %}
        <div class="px-3 pt-3 pb-1 bg-tabler-tertiary text-muted small text-uppercase">
          {{ group.grouper }}
        </div>
        <table class="table table-sm table-borderless mb-0 align-middle">
          <thead class="text-muted small">
            <tr>
              <th style="width: 32px;"></th>
              <th>{% translate "Action" %}</th>
              <th style="width: 220px;">{% translate "Default / Effective" %}</th>
              <th style="width: 200px;">{% translate "Override at this scope" %}</th>
              {% if audience != "user" %}
                <th style="width: 80px;">{% translate "Lock" %}</th>
              {% endif %}
              <th style="width: 80px;">{% translate "Status" %}</th>
            </tr>
          </thead>
          <tbody>
            {% for row in group.list %}
              <tr>
                <td>
                  {% if row.icon %}<i class="ti ti-{{ row.icon }} text-muted"></i>{% endif %}
                </td>
                <td>
                  <div class="fw-medium">{{ row.title }}</div>
                  <div class="text-muted small">
                    <code>{{ row.id }}</code>
                    <span class="ms-2">{{ row.scope_kind }}{% if row.scope_match %}: {{ row.scope_match }}{% endif %}</span>
                  </div>
                </td>
                <td>
                  <div class="text-muted small">{% translate "Default" %}:
                    {% if row.default_key %}<kbd>{{ row.default_key }}</kbd>{% else %}—{% endif %}
                  </div>
                  <div>{% translate "Effective" %}:
                    {% if row.effective_key %}<kbd>{{ row.effective_key }}</kbd>{% else %}<span class="text-muted">{% translate "(unbound)" %}</span>{% endif %}
                  </div>
                </td>
                <td>
                  {% if row.vendor_locked %}
                    <span class="badge bg-yellow-lt"><i class="ti ti-lock me-1"></i>{% translate "Vendor lock" %}</span>
                  {% elif not row.writable %}
                    <span class="text-muted small">{% translate "(read-only at this scope)" %}</span>
                  {% else %}
                    <input type="text"
                           name="key__{{ row.id }}"
                           value="{% if draft and row.id in draft %}{{ draft|dictlookup:row.id }}{% else %}{{ row.own_value }}{% endif %}"
                           class="form-control form-control-sm{% if errors and row.id in errors %} is-invalid{% endif %}"
                           placeholder="{{ row.default_key|default:'—' }}"
                           aria-label="{% blocktranslate with title=row.title %}Shortcut key for {{ title }}{% endblocktranslate %}"
                           data-shortcut-input
                           data-action-id="{{ row.id }}"
                           hx-get="{% url 'shortcuts:check-conflict' %}?action={{ row.id }}"
                           hx-trigger="change delay:300ms"
                           hx-target="closest tr .conflict-msg"
                           hx-swap="innerHTML">
                    {% if errors and row.id in errors %}
                      <div class="invalid-feedback d-block">{{ errors|dictlookup:row.id }}</div>
                    {% endif %}
                    <div class="conflict-msg small text-muted"></div>
                  {% endif %}
                </td>
                {% if audience != "user" %}
                  <td>
                    {% if row.lockable and not row.vendor_locked %}
                      <input type="checkbox"
                             name="lock__{{ row.id }}"
                             {% if row.own_locked %}checked{% endif %}
                             class="form-check-input"
                             title="{% translate 'Lock this binding (lower scopes cannot override)' %}">
                    {% endif %}
                  </td>
                {% endif %}
                <td>
                  {% if row.own_value and not row.vendor_locked %}
                    <span class="badge bg-blue-lt">{% translate "Overridden" %}</span>
                  {% endif %}
                </td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      {% empty %}
        <div class="empty p-4">
          <p class="empty-title">{% translate "No shortcut actions registered" %}</p>
          <p class="empty-subtitle text-muted">
            {% translate "Install at least one plugin that provides IShortcutAction implementations." %}
          </p>
        </div>
      {% endfor %}
    </div>
  </div>
</form>
{% endblock %}