{% load i18n %}
{# Cheat-sheet body — rendered into the shared #dialog modal. #}
<form class="modal-content" x-data="{ filter: '' }">
  <div class="modal-header">
    <h5 class="modal-title">
      <i class="ti ti-keyboard fs-3 me-2"></i>
      {% translate "Keyboard shortcuts" %}
    </h5>
    <button type="button" class="btn-close" data-bs-dismiss="modal"
            aria-label="{% translate 'Close' %}"></button>
  </div>

  <div class="modal-body">
    <div class="mb-3">
      <input type="search" class="form-control"
             x-model="filter"
             placeholder="{% translate 'Filter shortcuts…' %}"
             aria-label="{% translate 'Filter shortcuts' %}"
             autofocus>
    </div>

    {% if not categories %}
      <div class="empty py-4">
        <p class="empty-title">{% translate "No active shortcuts" %}</p>
        <p class="empty-subtitle text-muted">
          {% translate "There are no keyboard shortcuts available in the current view." %}
        </p>
      </div>
    {% endif %}

    {% for category, entries in categories %}
      <div class="mb-4" x-show="entries_visible_{{ forloop.counter }} = (
          {% for e in entries %}
              ('{{ e.title|escapejs }} {{ e.key|escapejs }}'.toLowerCase().includes(filter.toLowerCase())){% if not forloop.last %} || {% endif %}
          {% endfor %}
      )">
        <h6 class="text-uppercase text-muted small mb-2">{{ category }}</h6>
        <table class="table table-sm table-borderless mb-0">
          <tbody>
            {% for entry in entries %}
              <tr x-show="'{{ entry.title|escapejs }} {{ entry.key|escapejs }}'.toLowerCase().includes(filter.toLowerCase())">
                <td class="ps-0" style="width: 32px;">
                  {% if entry.icon %}
                    <i class="ti ti-{{ entry.icon }} text-muted"></i>
                  {% endif %}
                </td>
                <td>
                  <span class="fw-medium">{{ entry.title }}</span>
                  {% if entry.description %}
                    <div class="text-muted small">{{ entry.description }}</div>
                  {% endif %}
                </td>
                <td class="text-end pe-0" style="width: 140px;">
                  {% for step in entry.key.split %}
                    <kbd>{{ step }}</kbd>{% if not forloop.last %} <span class="text-muted">then</span> {% endif %}
                  {% endfor %}
                </td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    {% endfor %}
  </div>

  <div class="modal-footer">
    <small class="text-muted me-auto">
      {% translate "Press" %} <kbd>?</kbd> {% translate "anywhere to reopen this list." %}
    </small>
    <button type="button" class="btn" data-bs-dismiss="modal">
      {% translate "Close" %}
    </button>
  </div>
</form>