{% load i18n %}

<button id="open-shortcuts" aria-keyshortcuts="?">
  <kbd>?</kbd>
</button>
<a id="admin_index_link" href="{% url 'admin:index' %}" aria-keyshortcuts="g i" hidden></a>

<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">
  <section>
    <h3>{% translate "Global" %}</h3>
    <dl>
      <dt class="shortcut-description">{% translate "Show this dialog" %}</dt>
      <dd class="shortcut-keys"><kbd>?</kbd></dd>

      <dt class="shortcut-description">{% translate "Go to the site index" %}</dt>
      <dd class="shortcut-keys"><kbd>g</kbd> <kbd>i</kbd></dd>
    </dl>
  </section>
  {% block extra_shortcuts %}{% endblock %}
</dialog>