<!--
  Copyright 2021 The Go Authors. All rights reserved.
  Use of this source code is governed by a BSD-style
  license that can be found in the LICENSE file.
-->

{{define "modals"}}
  <dialog id="jump-to-modal" class="JumpDialog go-Modal go-Modal--md js-modal">
    <form method="dialog" data-gmtc="jump to form" aria-label="Jump to Identifier">
      <div class="Dialog-title go-Modal-header">
        <h2>Jump to</h2>
        <button
          class="go-Button go-Button--inline"
          type="button"
          data-modal-close
          data-gtmc="modal button"
          aria-label="Close"
        >
          <img
            class="go-Icon"
            height="24"
            width="24"
            src="/static/shared/icon/close_gm_grey_24dp.svg"
            alt=""
          />
        </button>
      </div>
      <div class="JumpDialog-filter">
        <input class="JumpDialog-input go-Input" autocomplete="off" type="text">
      </div>
      <div class="JumpDialog-body go-Modal-body">
        <div class="JumpDialog-list"></div>
      </div>
      <div class="go-Modal-actions">
        <button class="go-Button" data-test-id="close-dialog">Close</button>
      </div>
    </form>
  </dialog>

  <dialog class="ShortcutsDialog go-Modal go-Modal--sm js-modal">
    <form method="dialog">
      <div class="go-Modal-header">
        <h2>Keyboard shortcuts</h2>
        <button
          class="go-Button go-Button--inline"
          type="button"
          data-modal-close
          data-gtmc="modal button"
          aria-label="Close"
        >
          <img
            class="go-Icon"
            height="24"
            width="24"
            src="/static/shared/icon/close_gm_grey_24dp.svg"
            alt=""
          />
        </button>
      </div>
      <div class="go-Modal-body">
        <table>
          <tbody>
            <tr><td class="ShortcutsDialog-key">
              <strong>?</strong></td><td> : This menu</td>
            </tr>
            <tr><td class="ShortcutsDialog-key">
              <strong>/</strong></td><td> : Search site</td>
            </tr>
            <tr><td class="ShortcutsDialog-key">
              <strong>f</strong> or <strong>F</strong></td><td> : Jump to</td>
            </tr>
            <tr><td class="ShortcutsDialog-key">
              <strong>t</strong> or <strong>T</strong></td><td> : Toggle theme</td>
              <td class="ShortcutsDialog-theme">
                <span class="go-Chip go-Chip--inverted ShortcutsDialog-themeLight">light</span>
                <span class="go-Chip go-Chip--inverted ShortcutsDialog-themeDark">dark</span>
                <span class="go-Chip go-Chip--inverted ShortcutsDialog-themeAuto">auto</span>
              </td>
            </tr>
            <tr>
              <td class="ShortcutsDialog-key"><strong>y</strong> or <strong>Y</strong></td>
              <td> : Canonical URL</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="go-Modal-actions">
        <button class="go-Button" data-test-id="close-dialog">Close</button>
      </div>
    </form>
  </dialog>
{{end}}