<turbo-stream action="append" target="modal"><template>


<div class="fixed z-100 inset-0 overflow-y-auto " aria-labelledby="modal-title" role="dialog" aria-modal="true"
  data-modal-target="wrapper"
  data-hide-initial=false
  data-modal-open=true
  data-open-button-id=""
  data-keep-on-close=false
  >
  <div class="items-end justify-center min-h-screen pt-32 px-4 pb-20 text-center sm:block sm:p-0">
    <!--
      Background overlay, show/hide based on modal state.

      Entering: "ease-out duration-300"
        From: "opacity-0"
        To: "opacity-100"
      Leaving: "ease-in duration-200"
        From: "opacity-100"
        To: "opacity-0"
    -->
    <div class="z-100 fixed inset-0 bg-gray-500 dark:bg-black bg-gray-500/75 dark:bg-black/85 transition duration-500" aria-hidden="true" data-modal-target="overlay"
      data-action="click-&gt;modal#close"
      ></div>

    <!-- This element is to trick the browser into centering the modal contents. -->
    <span class="hidden sm:inline-block sm:align-middle sm:h-screen h-screen" aria-hidden="true">&#8203;</span>

    <!--
      Modal panel, show/hide based on modal state.

      Entering: "ease-out duration-300"
        From: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
        To: "opacity-100 translate-y-0 sm:scale-100"
      Leaving: "ease-in duration-200"
        From: "opacity-100 translate-y-0 sm:scale-100"
        To: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
    -->
    <div class="relative z-110 sm:inline-block align-bottom bg-white dark:bg-surface-raised dark:text-text rounded-lg  text-left overflow-hidden shadow-xl dark:shadow-none dark:ring-1 dark:ring-white/15 dark:inset-ring dark:inset-ring-white/10 transform transition-all  sm:my-8 sm:align-middle sm:max-w-lg sm:w-full "
      data-modal-target="body"
      >
        <div class="absolute top-0 right-0 pt-4 pr-4 z-110">
          <button type="button" class="bg-white dark:bg-surface-raised rounded-md text-gray-400 dark:text-text-subtle hover:text-gray-500 dark:hover:text-text-muted focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-surface-raised focus:ring-indigo-500 dark:focus:ring-ring"
            data-action="modal#close"
          >
            <span class="sr-only">Close</span>
            <!-- Heroicon name: outline/x -->
            <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
        </div>
          <!-- This example requires Tailwind CSS v2.0+ -->
    <div class="bg-white dark:bg-surface-raised shadow overflow-hidden sm:rounded-lg">
      <div class="px-4 py-5 sm:px-6">
        <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-text">Keyboard Shortcuts</h3>
        <p class="mt-1 max-w-2xl text-sm text-gray-500 dark:text-text-subtle">Use these shortcuts to get around the detailed charts page faster.</p>
      </div>
      <div class="border-t border-gray-200 dark:border-border px-4 py-5 sm:p-0">
        <dl class="sm:divide-y sm:divide-gray-200">
            <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
              <dt class="text-sm font-medium text-gray-500 dark:text-text-subtle"><kbd class="border border-gray-200 dark:border-border rounded-lg p-2 shadow-md items-center text-center font-mono">z</kbd></dt>
              <dd class="mt-1 text-sm text-gray-900 dark:text-text sm:mt-0 sm:col-span-2">Zoom in</dd>
            </div>
            <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
              <dt class="text-sm font-medium text-gray-500 dark:text-text-subtle"><kbd class="border border-gray-200 dark:border-border rounded-lg p-2 shadow-md items-center text-center font-mono">x</kbd></dt>
              <dd class="mt-1 text-sm text-gray-900 dark:text-text sm:mt-0 sm:col-span-2">Zoom out</dd>
            </div>
            <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
              <dt class="text-sm font-medium text-gray-500 dark:text-text-subtle"><kbd class="border border-gray-200 dark:border-border rounded-lg p-2 shadow-md items-center text-center font-mono">&#8594;</kbd></dt>
              <dd class="mt-1 text-sm text-gray-900 dark:text-text sm:mt-0 sm:col-span-2">Right arrow key pans to the right</dd>
            </div>
            <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
              <dt class="text-sm font-medium text-gray-500 dark:text-text-subtle"><kbd class="border border-gray-200 dark:border-border rounded-lg p-2 shadow-md items-center text-center font-mono">&#8592;</kbd></dt>
              <dd class="mt-1 text-sm text-gray-900 dark:text-text sm:mt-0 sm:col-span-2">Left arrow key pans to the left</dd>
            </div>
            <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
              <dt class="text-sm font-medium text-gray-500 dark:text-text-subtle"><kbd class="border border-gray-200 dark:border-border rounded-lg p-2 shadow-md items-center text-center font-mono">r</kbd></dt>
              <dd class="mt-1 text-sm text-gray-900 dark:text-text sm:mt-0 sm:col-span-2">Reset the chart back to the max zoom</dd>
            </div>
            <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
              <dt class="text-sm font-medium text-gray-500 dark:text-text-subtle"><kbd class="border border-gray-200 dark:border-border rounded-lg p-2 shadow-md items-center text-center font-mono">h</kbd></dt>
              <dd class="mt-1 text-sm text-gray-900 dark:text-text sm:mt-0 sm:col-span-2">Show/hide the chart menu</dd>
            </div>
            <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
              <dt class="text-sm font-medium text-gray-500 dark:text-text-subtle"><kbd class="border border-gray-200 dark:border-border rounded-lg p-2 shadow-md items-center text-center font-mono">n</kbd></dt>
              <dd class="mt-1 text-sm text-gray-900 dark:text-text sm:mt-0 sm:col-span-2">Jump to the next day</dd>
            </div>
            <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
              <dt class="text-sm font-medium text-gray-500 dark:text-text-subtle"><kbd class="border border-gray-200 dark:border-border rounded-lg p-2 shadow-md items-center text-center font-mono">p</kbd></dt>
              <dd class="mt-1 text-sm text-gray-900 dark:text-text sm:mt-0 sm:col-span-2">Jump to the previous day</dd>
            </div>
            <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
              <dt class="text-sm font-medium text-gray-500 dark:text-text-subtle"><kbd class="border border-gray-200 dark:border-border rounded-lg p-2 shadow-md items-center text-center font-mono">s</kbd></dt>
              <dd class="mt-1 text-sm text-gray-900 dark:text-text sm:mt-0 sm:col-span-2">Switch between (s)crolling and zoom mode. When in scolling mode, clicking and dragging will scroll around the chart. When in zoom mode, clicking and dragging will zoom in.</dd>
            </div>
            <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
              <dt class="text-sm font-medium text-gray-500 dark:text-text-subtle"><kbd class="border border-gray-200 dark:border-border rounded-lg p-2 shadow-md items-center text-center font-mono">k</kbd></dt>
              <dd class="mt-1 text-sm text-gray-900 dark:text-text sm:mt-0 sm:col-span-2">Show these keyboard shortcuts</dd>
            </div>
        </dl>
      </div>
    </div>

    </div>
  </div>
</div></template></turbo-stream>