<div class="umb-keyboard-shortcuts-overview">

  <div class="umb-keyboard-shortcuts-overview__keyboard-shortcut -no-air -no-stroke" data-hotkey="alt+shift+k" ng-click="toggleShortcutsOverlay()">
    <div class="umb-keyboard-shortcuts-overview__description"><localize key="shortcuts_showShortcuts">show shortcuts</localize></div>
    <div class="umb-keyboard-keys">
      <div class="umb-keyboard-key-wrapper">
        <div class="umb-keyboard-key">alt</div>
        <div>+</div>
      </div>
      <div class="umb-keyboard-key-wrapper">
        <div class="umb-keyboard-key">shift</div>
        <div>+</div>
      </div>
      <div class="umb-keyboard-key-wrapper">
        <div class="umb-keyboard-key">k</div>
      </div>
    </div>
  </div>

  <div class="umb-keyboard-shortcuts-overview__overlay" ng-if="showOverlay">

    <a href="" class="umb-keyboard-shortcuts-overview__overlay-close" ng-click="toggleShortcutsOverlay()" data-hotkey="esc" hotkey-when-hidden="true">
      <i class="icon-delete"></i>
    </a>

    <div class="umb-keyboard-shortcuts-overview__overlay-content">

      <div class="umb-keyboard-shortcuts-overview__keyboard-shortcuts-group" ng-repeat="keyboardShortcutGroup in model">

        <h5 class="umb-keyboard-shortcuts-overview__keyboard-shortcuts-group-name">{{ keyboardShortcutGroup.name }}</h5>

        <div class="umb-keyboard-shortcuts-overview__keyboard-shortcuts">

          <div class="umb-keyboard-shortcuts-overview__keyboard-shortcut" ng-repeat="keyboardShortcut in keyboardShortcutGroup.shortcuts">
            <div class="umb-keyboard-shortcuts-overview__description">{{ keyboardShortcut.description }}</div>
            <div class="umb-keyboard-keys">

              <div ng-repeat="key in keyboardShortcut.platformKeys">

                <div class="umb-keyboard-key-wrapper">
                  <div class="umb-keyboard-key">{{ key.key }}</div>
                  <div ng-if="!$last">
                    <span ng-if="!keyboardShortcut.keyRange">+</span>
                    <span ng-if="keyboardShortcut.keyRange">-</span>
                  </div>
                </div>

              </div>

            </div>
          </div>

        </div>

      </div>

    </div>
  </div>

</div>
