<div id="help-dialog" class="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document" style="min-width: 100%; height: 100%; margin: 0;">
        <div class="modal-content" style="height: auto;">
            <div class="modal-header">
                <h5 class="modal-title mr-auto">Help (full documentation is available <a class="external" href="https://github.com/zadam/trilium/wiki">online</a>)</h5>

                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" style="overflow: auto; height: calc(100vh - 70px);">
                <div class="card-columns help-cards">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">Note navigation</h5>

                            <p class="card-text">
                                <ul>
                                    <li><kbd>UP</kbd>, <kbd>DOWN</kbd> - go up/down in the list of notes</li>
                                    <li><kbd>LEFT</kbd>, <kbd>RIGHT</kbd> - collapse/expand node</li>
                                    <li><kbd data-command="backInNoteHistory"></kbd>, <kbd data-command="forwardInNoteHistory"></kbd> - go back / forwards in the history</li>
                                    <li><kbd data-command="jumpToNote"></kbd> - show <a class="external" href="https://github.com/zadam/trilium/wiki/Note-navigation#jump-to-note">"Jump to" dialog</a></li>
                                    <li><kbd data-command="scrollToActiveNote"></kbd> - scroll to active note</li>
                                    <li><kbd>Backspace</kbd> - jump to parent note</li>
                                    <li><kbd data-command="collapseTree"></kbd> - collapse whole note tree</li>
                                    <li><kbd data-command="collapseSubtree"></kbd> - collapse sub-tree</li>
                                </ul>
                            </p>
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">Tab shortcuts</h5>

                            <p class="card-text">
                            <ul>
                                <li><kbd>CTRL+click</kbd> (or middle mouse click) on note link opens note in a new tab</li>
                            </ul>

                            Only in desktop (electron build):
                            <ul>
                                <li><kbd data-command="openNewTab"></kbd> open empty tab</li>
                                <li><kbd data-command="closeActiveTab"></kbd> close active tab</li>
                                <li><kbd data-command="activateNextTab"></kbd> activate next tab</li>
                                <li><kbd data-command="activatePreviousTab"></kbd> activate previous tab</li>
                            </ul>
                            </p>
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">Creating notes</h5>

                            <p class="card-text">
                                <ul>
                                    <li><kbd data-command="createNoteAfter"></kbd> - create new note after the active note</li>
                                    <li><kbd data-command="createNoteInto"></kbd> - create new sub-note into active note</li>
                                    <li><kbd data-command="editBranchPrefix"></kbd> - edit <a class="external" href="https://github.com/zadam/trilium/wiki/Tree concepts#prefix">prefix</a> of active note clone</li>
                                </ul>
                            </p>
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">Moving / cloning notes</h5>

                            <p class="card-text">
                                <ul>
                                    <li><kbd data-command="moveNoteUp"></kbd>, <kbd data-command="moveNoteDown"></kbd> - move note up/down in the note list</li>
                                    <li><kbd data-command="moveNoteUpInHierarchy"></kbd>, <kbd data-command="moveNoteDownInHierarchy"></kbd> - move note up in the hierarchy</li>
                                    <li><kbd data-command="addNoteAboveToSelection"></kbd>, <kbd data-command="addNoteBelowToSelection"></kbd> - multi-select note above/below</li>
                                    <li><kbd data-command="selectAllNotesInParent"></kbd> - select all notes in the current level</li>
                                    <li><kbd>Shift+click</kbd> - select note</li>
                                    <li><kbd data-command="copyNotesToClipboard"></kbd> - copy active note (or current selection) into clipboard (used for <a class="external" href="https://github.com/zadam/trilium/wiki/Cloning notes">cloning</a>)</li>
                                    <li><kbd data-command="cutNotesToClipboard"></kbd> - cut current (or current selection) note into clipboard (used for moving notes)</li>
                                    <li><kbd data-command="pasteNotesFromClipboard"></kbd> - paste note(s) as sub-note into active note (which is either move or clone depending on whether it was copied or cut into clipboard)</li>
                                    <li><kbd data-command="deleteNotes"></kbd> - delete note / sub-tree</li>
                                </ul>
                            </p>
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">Editing notes</h5>

                            <p class="card-text">
                                <ul>
                                    <li><kbd data-command="editNoteTitle"></kbd> in tree pane will switch from tree pane into note title. Enter from note title will switch focus to text editor.
                                        <kbd data-command="scrollToActiveNote"></kbd> will switch back from editor to tree pane.</li>
                                    <li><kbd>Ctrl+K</kbd> - create / edit external link</li>
                                    <li><kbd data-command="addLinkToText"></kbd> - create internal link</li>
                                    <li><kbd data-command="insertDateTimeToText"></kbd> - insert current date and time at caret position</li>
                                    <li><kbd data-command="scrollToActiveNote"></kbd> - jump away to the tree pane and scroll to active note</li>
                                </ul>
                            </p>
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title"><a class="external" href="https://github.com/zadam/trilium/wiki/Text-notes#autoformat">Markdown-like autoformatting</a></h5>

                            <p class="card-text">
                                <ul>
                                    <li><kbd>#</kbd>, <kbd>##</kbd>, <kbd>###</kbd> etc. followed by space for headings</li>
                                    <li><kbd>*</kbd> or <kbd>-</kbd> followed by space for bullet list</li>
                                    <li><kbd>1.</kbd> or <kbd>1)</kbd> followed by space for numbered list</li>
                                    <li>start a line with <kbd>&gt;</kbd> followed by space for block quote</li>
                                </ul>
                            </p>
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">Troubleshooting</h5>

                            <p class="card-text">
                                <ul>
                                    <li><kbd data-command="reloadFrontendApp"></kbd> - reload Trilium frontend</li>
                                    <li><kbd data-command="openDevTools"></kbd> - show developer tools</li>
                                    <li><kbd data-command="showSQLConsole"></kbd> - show SQL console</li>
                                </ul>
                            </p>
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">Other</h5>

                            <p class="card-text">
                                <ul>
                                    <li><kbd data-command="toggleZenMode"></kbd> - Zen mode - display only note editor, everything else is hidden</li>
                                    <li><kbd data-command="searchNotes"></kbd> - toggle search form in tree pane</li>
                                    <li><kbd data-command="findInText"></kbd> - in page search</li>
                                </ul>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
