<!-- Help panel keystroke-window-wrapper -->
    <div class="modal-wrapper" style="display:none;">
        <div class="keystroke-header">
            <a class="keystroke-info-icon"></a> <span class="keystroke-header-title"><%-translate("Shortcuts")%></span>
        </div>

        <div class="keystroke-main-col">
            <div class="keystroke-item keystroke-separator">
                <div class="keystroke-item-keys">
                    <a class="keystroke-item-key"><%-ctrl%></a> / <a class="keystroke-item-key"><%-shift%></a> + <a class="keystroke-item-key">Click</a>
                </div><span class="keystroke-item-title"><%-translate("Multi-Select")%></span>

                <p class="keystroke-item-text"><%-translate("Selects or deselects a layer to add it to or remove it from a group of selected layers.")%></p>
            </div>

            <div class="keystroke-item keystroke-separator">
                <div class="keystroke-item-keys">
                    <a class="keystroke-item-key">X</a>
                </div><span class="keystroke-item-title"><%-translate("Toggle Measurement Tooltip")%></span>

                <p class="keystroke-item-text"><%-translate("Toggles measurement tooltip on hover.")%></p>
            </div>

            <div class="keystroke-item keystroke-separator">
                <div class="keystroke-item-keys"><a class="keystroke-item-key"><%-alt%></a> + <a class="keystroke-item-key">&minus;</a>/<a class="keystroke-item-key">+</a></div><span class="keystroke-item-title"><%-translate("Zoom")%></span>

                <p class="keystroke-item-text"><%-translate("Zoom preview canvas in and out.")%></p>
            </div>

            <div class="keystroke-item keystroke-separator">
                <div class="keystroke-item-keys">
                    <a class="keystroke-item-key">E</a>
                </div><span class="keystroke-item-title"><%-translate("Eyedropper Tool")%></span>

                <p class="keystroke-item-text"><%-translate("Allows extraction of pixel-level color values.")%></p>
            </div>


            <div class="keystroke-item">
                <div class="keystroke-item-keys">
                    <a class="keystroke-item-key">&larr;</a>
                </div><span class="keystroke-item-title"><%-translate("Select Parent Layer")%></span>

                <p class="keystroke-item-text"><%=translate("Pressing &larr; will select the layer that is parent to the current layer.")%></p>
            </div>

            <div class="keystroke-item">
                <div class="keystroke-item-keys">
                    <a class="keystroke-item-key">&rarr;</a>
                </div><span class="keystroke-item-title"><%-translate("Select First Child")%></span>

                <p class="keystroke-item-text"><%=translate("Pressing &rarr; will select the first child layer of the current layer. If the currently selected layer has no children, this key does nothing.")%></p>
            </div>

            <div class="keystroke-item keystroke-separator">
                <div class="keystroke-item-keys">
                    <a class="keystroke-item-key">&darr;</a><a class=
                                                                       "keystroke-item-key">&uarr;</a>
                </div><span class="keystroke-item-title"><%-translate("Next/Previous Sibling Layer")%></span>

                <p class="keystroke-item-text"><%=translate("Selects the next or previous sibling layer. Pressing &uarr; will select the previous sibling and pressing &darr; will select the next sibling layer.")%></p>
            </div>

            <div class="keystroke-item">
                <div class="keystroke-item-keys">
                    <a class="keystroke-item-key">Esc</a>
                </div><span class="keystroke-item-title"><%-translate("Clear/Exit")%></span>

                <p class="keystroke-item-text"><%=translate("Pressing &ldquo;Esc&rdquo; clears the current selection, exits the current mode, or dismisses a dialog.")%></p>
            </div>
        </div>
    </div>
