<div class="overlay-modal" id="keyboard-shortcuts" tabindex="-1" role="dialog"
  aria-label="{{ _('Keyboard shortcuts') }}">
    <div class="modal-body" data-simplebar data-simplebar-auto-hide="false">
        <div>
            <table class="hotkeys_table table table-striped table-bordered table-condensed">
                <thead>
                    <tr>
                        <th colspan="2">{{ _("The basics") }}</th>
                    </tr>
                </thead>
                <tr>
                    <td class="definition">{% trans %}Reply to message{% endtrans %}</td>
                    <td><span class="hotkey"><kbd>Enter</kbd> or <kbd>R</kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">{% trans %}New stream message{% endtrans %}</td>
                    <td><span class="hotkey"><kbd>C</kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">{% trans %}New private message{% endtrans %}</td>
                    <td><span class="hotkey"><kbd>X</kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">{% trans %}Cancel compose{% endtrans %}</td>
                    <td><span class="hotkey"><kbd>Esc</kbd> or <kbd>Ctrl</kbd> + <kbd>[</kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">{% trans %}View drafts{% endtrans %}</td>
                    <td><span class="hotkey"><kbd>D</kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">{% trans %}Next message{% endtrans %}</td>
                    <td><span class="hotkey"><kbd class="arrow-key">↓</kbd> or <kbd>J</kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">{% trans %}Last message{% endtrans %}</td>
                    <td><span class="hotkey"><kbd>End</kbd> or <kbd>Shift</kbd> + <kbd>G</kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">{% trans %}Next unread topic{% endtrans %}</td>
                    <td><span class="hotkey"><kbd>N</kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">{% trans %}Next unread private message{% endtrans %}</td>
                    <td><span class="hotkey"><kbd>P</kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">{% trans %}Initiate a search{% endtrans %}</td>
                    <td><span class="hotkey"><kbd>Ctrl</kbd> + <kbd>K</kbd> or <kbd>/</kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">{% trans %}Show keyboard shortcuts{% endtrans %}</td>
                    <td><span class="hotkey"><kbd>?</kbd></span></td>
                </tr>
            </table>
        </div>
        <div>
            <table class="hotkeys_table table table-striped table-bordered table-condensed">
                <thead>
                    <tr>
                        <th colspan="2">{{ _("Navigation") }}</th>
                    </tr>
                </thead>
                <tr>
                    <td class="definition">{% trans %}Initiate a search{% endtrans %}</td>
                    <td><span class="hotkey"><kbd>Ctrl</kbd> + <kbd>K</kbd> or <kbd>/</kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">{% trans %}Search streams{% endtrans %}</td>
                    <td><span class="hotkey"><kbd>Q</kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">{% trans %}Search people{% endtrans %}</td>
                    <td><span class="hotkey"><kbd>W</kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">{% trans %}Previous message{% endtrans %}</td>
                    <td><span class="hotkey"><kbd class="arrow-key">↑</kbd> or <kbd>K</kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">{% trans %}Next message{% endtrans %}</td>
                    <td><span class="hotkey"><kbd class="arrow-key">↓</kbd> or <kbd>J</kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">{% trans %}Scroll up{% endtrans %}</td>
                    <td><span class="hotkey"><kbd>PgUp</kbd> or <kbd>Shift</kbd> + <kbd>K</kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">{% trans %}Scroll down{% endtrans %}</td>
                    <td><span class="hotkey"><kbd>PgDn</kbd> or <kbd>Shift</kbd> + <kbd>J</kbd> or <kbd>Space</kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">{% trans %}Last message{% endtrans %}</td>
                    <td><span class="hotkey"><kbd>End</kbd> or <kbd>Shift</kbd> + <kbd>G</kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">{% trans %}First message{% endtrans %}</td>
                    <td><span class="hotkey"><kbd>Home</kbd></span></td>
                </tr>
            </table>
        </div>
        <div>
            <table class="hotkeys_table table table-striped table-bordered table-condensed">
                <thead>
                    <tr>
                        <th colspan="2">{% trans %}Composing messages{% endtrans %}</th>
                    </tr>
                </thead>
                <tr>
                    <td class="definition">{% trans %}Reply to message{% endtrans %}</td>
                    <td><span class="hotkey"><kbd>Enter</kbd> or <kbd>R</kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">{% trans %}Reply to author{% endtrans %}</td>
                    <td><span class="hotkey"><kbd>Shift</kbd> + <kbd>R</kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">{% trans %}Quote and reply to message{% endtrans %}</td>
                    <td><span class="hotkey"><kbd>></kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">{% trans %}New stream message{% endtrans %}</td>
                    <td><span class="hotkey"><kbd>C</kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">{% trans %}New private message{% endtrans %}</td>
                    <td><span class="hotkey"><kbd>X</kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">{% trans %}Compose a reply @-mentioning author{% endtrans %}</td>
                    <td><span class="hotkey"><kbd>@</kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">{% trans %}Send message{% endtrans %}</td>
                    <td><span class="hotkey"><span class="small_hotkey"><kbd>Tab</kbd> then <kbd>Enter</kbd> or <kbd>Ctrl</kbd> + <kbd>Enter</kbd></span></span></td>
                </tr>
                <tr>
                    <td class="definition">{% trans %}Insert new line{% endtrans %}</td>
                    <td><span class="hotkey"><kbd>Shift</kbd> + <kbd>Enter</kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">{% trans %}Cancel compose{% endtrans %}</td>
                    <td><span class="hotkey"><kbd>Esc</kbd> or <kbd>Ctrl</kbd> + <kbd>[</kbd></span></td>
                </tr>
            </table>
        </div>
        <div>
            <table class="hotkeys_table table table-striped table-bordered table-condensed">
                <thead>
                    <tr>
                        <th colspan="2">{{ _("Narrowing") }}</th>
                    </tr>
                </thead>
                <tr>
                    <td class="definition">{% trans %}Narrow to stream{% endtrans %}</td>
                    <td><span class="hotkey"><kbd>S</kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">{% trans %}Narrow to topic or PM conversation{% endtrans %}</td>
                    <td><span class="hotkey"><kbd>Shift</kbd> + <kbd>S</kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">{% trans %}Narrow to all private messages{% endtrans %}</td>
                    <td><span class="hotkey"><kbd>Shift</kbd> + <kbd>P</kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">{% trans %}Narrow to next unread topic{% endtrans %}</td>
                    <td><span class="hotkey"><kbd>N</kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">{% trans %}Narrow to next unread private message{% endtrans %}</td>
                    <td><span class="hotkey"><kbd>P</kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">{% trans %}Cycle between stream narrows{% endtrans %}</td>
                    <td><span class="hotkey"><kbd>Shift</kbd> + <kbd>A</kbd> or <kbd>Shift</kbd> + <kbd>D</kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">{% trans %}Narrow to all unmuted messages{% endtrans %}</td>
                    <td><span class="hotkey"><kbd>Esc</kbd> or <kbd>Ctrl</kbd> + <kbd>[</kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">{% trans %}Narrow to current compose box recipient{% endtrans %}</td>
                    <td><span class="hotkey"><kbd>Ctrl</kbd> + <kbd>.</kbd></span></td>
                </tr>
            </table>
        </div>
        <div>
            <table class="hotkeys_table table table-striped table-bordered table-condensed">
                <thead>
                    <tr>
                        <th colspan="2">{{ _("Message actions") }}</th>
                    </tr>
                </thead>
                <tr>
                    <td class="definition">{% trans %}Edit your last message{% endtrans %}</td>
                    <td><span class="hotkey"><kbd class="arrow-key">←</kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">{% trans %}Show message sender's profile{% endtrans %}</td>
                    <td><span class="hotkey"><kbd>U</kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">{% trans %}Show images in thread{% endtrans %}</td>
                    <td><span class="hotkey"><kbd>V</kbd></span></td>
                </tr>
                <tr id="edit-message-hotkey-help">
                    <td class="definition">{% trans %}Edit selected message{% endtrans %}</td>
                    <td><span class="hotkey"><kbd>E</kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">{% trans %}Star selected message{% endtrans %}</td>
                    <td><span class="hotkey"><kbd>Ctrl</kbd> + <kbd>S</kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">
                        {% trans %}React to selected message with{% endtrans %}
                        <img alt=":thumbs_up:"
                          class="emoji"
                          src="/static/generated/emoji/images/emoji/unicode/1f44d.png"
                          title=":thumbs_up:"/>
                    </td>
                    <td><span class="hotkey"><kbd>+</kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">{% trans %}Collapse/show selected message{% endtrans %}</td>
                    <td><span class="hotkey"><kbd>-</kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">{% trans %}Toggle topic mute{% endtrans %}</td>
                    <td><span class="hotkey"><kbd>Shift</kbd> + <kbd>M</kbd></span></td>
                </tr>
            </table>
        </div>
        <div>
            <table class="hotkeys_table table table-striped table-bordered table-condensed">
                <thead>
                    <tr>
                        <th colspan="2">{{ _("Drafts") }}</th>
                    </tr>
                </thead>
                <tr>
                    <td class="definition">{% trans %}View drafts{% endtrans %}</td>
                    <td><span class="hotkey"><kbd>D</kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">{% trans %}Edit selected draft{% endtrans %}</td>
                    <td><span class="hotkey"><kbd>Enter</kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">{% trans %}Delete selected draft{% endtrans %}</td>
                    <td><span class="hotkey"><kbd>Backspace</kbd></span></td>
                </tr>
            </table>
        </div>
        <div>
            <table class="hotkeys_table table table-striped table-bordered table-condensed">
                <thead>
                    <tr>
                        <th colspan="2">{{ _("Menus") }}</th>
                    </tr>
                </thead>
                <tr>
                    <td class="definition">{% trans %}Toggle the gear menu{% endtrans %}</td>
                    <td><span class="hotkey"><kbd>G</kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">{% trans %}Open message menu{% endtrans %}</td>
                    <td><span class="hotkey"><kbd>I</kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">{% trans %}Open reactions menu{% endtrans %}</td>
                    <td><span class="hotkey"><kbd>:</kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">{% trans %}Show keyboard shortcuts{% endtrans %}</td>
                    <td><span class="hotkey"><kbd>?</kbd></span></td>
                </tr>
            </table>
        </div>
        <div>
            <table class="hotkeys_table table table-striped table-bordered table-condensed">
                <thead>
                    <tr>
                        <th colspan="2">{{ _("Streams settings") }}</th>
                    </tr>
                </thead>
                <tr>
                    <td class="definition">{% trans %}Scroll through streams{% endtrans %}</td>
                    <td><span class="hotkey"><kbd class="arrow-key">↑</kbd> or <kbd class="arrow-key">↓</kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">{% trans %}Switch between tabs{% endtrans %}</td>
                    <td><span class="hotkey"><kbd class="arrow-key">←</kbd> or <kbd class="arrow-key">→</kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">{% trans %}View stream messages{% endtrans %}</td>
                    <td><span class="hotkey"><kbd>Shift</kbd> + <kbd>V</kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">{% trans %}Subscribe to/unsubscribe from selected stream{% endtrans %}</td>
                    <td><span class="hotkey"><kbd>Shift</kbd> + <kbd>S</kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">{% trans %}Create new stream{% endtrans %}</td>
                    <td><span class="hotkey"><kbd>N</kbd></span></td>
                </tr>
            </table>
        </div>
        <hr/>
        <a href="/help/keyboard-shortcuts" target="_blank">{% trans %}Detailed keyboard shortcuts documentation{% endtrans %}</a>
    </div>
</div>
