<script type="text/template" id="templates/dialogs/cheatsheet.html">
  <div id="cheatsheetContainer" class="dialog-wrapper">
    <h3 class="dialog-head">
      <span class="dialog-title">Keyboard shortcuts</span>
      <span class="dialog-close">X</span>
    </h3>
    <div class="cheatsheet-container dialog-content">
      <div class="cheatsheet-section">
        <h3 class="cheatsheet-title">Tool shortcuts</h3>
        <ul class="cheatsheet-tool-shortcuts"></ul>
      </div>
      <div class="cheatsheet-section">
        <h3 class="cheatsheet-title">Misc shortcuts</h3>
        <ul class="cheatsheet-misc-shortcuts"></ul>
      </div>
      <div class="cheatsheet-boxes">
        <div class="cheatsheet-section">
          <h3 class="cheatsheet-title">Selection shortcuts</h3>
          <ul class="cheatsheet-selection-shortcuts"></ul>
        </div>
        <div class="cheatsheet-section">
          <h3 class="cheatsheet-title">Color shortcuts</h3>
          <ul class="cheatsheet-color-shortcuts"></ul>
        </div>
        <div class="cheatsheet-section">
          <h3 class="cheatsheet-title">Storage shortcuts</h3>
          <ul class="cheatsheet-storage-shortcuts"></ul>
        </div>
      </div>
    </div>
    <div class="cheatsheet-actions">
      <span class="cheatsheet-helptext" rel="tooltip" data-placement="top" title="!!!Set in CheatsheetController!!!"><b>Customize shortcuts ?</b></span>
      <button type="button" name="cheatsheet-restore-defaults" data-action="restore-defaults" class="button cheatsheet-button cheatsheet-restore-defaults">Restore default shortcuts</button>
    </div>

    <!-- Event trap to capture keyboard remaps -->
    <div style="position:relative; overflow:hidden; width:1px; height:1px;">
      <input type="text" id="cheatsheetEventTrap" style="position:absolute; top:-1000px;" />
    </div>
  </div>
</script>

<script type="text/template" id="cheatsheet-shortcut-template">
  <li class="cheatsheet-shortcut {{className}}" data-shortcut-id="{{id}}">
    <div class="cheatsheet-icon {{icon}}"></div>
    <span class="cheatsheet-key" rel="tooltip" data-placement="top" title="{{title}}">{{key}}</span>
    <span class="cheatsheet-description">{{description}}</span>
  </li>
</script>