{% load i18n %}
{% comment %}
  Read-only cheat-sheet rendered into the standard conjunto settings
  section pane. Reads bindings from cj_layout (already injected by the
  globals context processor) so we don't run the registry twice.
{% endcomment %}

<div class="card-body">
  <p class="text-muted mb-3">
    {% blocktranslate %}
      The keys below are configured by the system or your tenant administrator.
      Press <kbd>?</kbd> anywhere in the application to open the same overview
      as a modal.
    {% endblocktranslate %}
  </p>

  {% if cj_layout.shortcuts.bindings %}
    <table class="table table-sm table-borderless align-middle mb-0">
      <thead class="text-muted small">
        <tr>
          <th>{% translate "Action" %}</th>
          <th>{% translate "Activation" %}</th>
          <th class="text-end" style="width: 200px;">{% translate "Key" %}</th>
        </tr>
      </thead>
      <tbody>
        {% for b in cj_layout.shortcuts.bindings %}
          <tr>
            <td><code class="small">{{ b.id }}</code></td>
            <td><span class="badge bg-tabler-tertiary">{{ b.scope }}</span></td>
            <td class="text-end">
              {% for step in b.key.split %}
                <kbd>{{ step }}</kbd>{% if not forloop.last %} <span class="text-muted">then</span> {% endif %}
              {% endfor %}
            </td>
          </tr>
        {% endfor %}
      </tbody>
    </table>
  {% else %}
    <div class="empty">
      <p class="empty-title">{% translate "No keyboard shortcuts active" %}</p>
      <p class="empty-subtitle text-muted">
        {% translate "No plugin has registered shortcut actions yet." %}
      </p>
    </div>
  {% endif %}
</div>