{% load i18n shortcuts %}
{% get_shortcuts as shortcuts %}

{% block shortcut_buttons %}
  <button id="open-shortcuts" data-hotkey="{{ shortcuts.global.show_dialog.1 }}">
    <kbd>?</kbd>
  </button>
  <a id="admin_index_link" href="{% url 'admin:index' %}" data-hotkey="{{ shortcuts.global.go_to_index.1 }}" hidden></a>
{% endblock %}

<dialog class="keyboard-shortcuts" id="shortcuts-dialog">
  <div class="dialog-heading">
    <h2>{% translate "Keyboard shortcuts" %}</h2>
    <form method="dialog">
      <button aria-label="{% translate 'Close' %}">&#10006;</button>
    </form>
  </div>
  <label for="toggle-shortcuts">{% translate "Use keyboard shortcuts" %}</label>
  <input type="checkbox" id="toggle-shortcuts">
  {% block global_shortcuts %}
    <section>
      <h3>{% translate "Global" %}</h3>
      <dl>
        {% for shortcut in shortcuts.global.values %}
          <dt class="shortcut-description">{{ shortcut.0 }}</dt>
          <dd class="shortcut-keys">{% shortcut_format_kbd shortcut.1 %}</dd>
        {% endfor %}
      </dl>
    </section>
  {% endblock %}
  {% block extra_shortcuts %}{% endblock %}
</dialog>