<%# locals: (title:, back_path: nil) %>

<%= modal do %>
  <div class="flex flex-col w-screen max-w-xl" data-controller="list-keyboard-navigation">
    <div class="border-b border-alpha-black-25 p-4 text-gray-800 flex items-center space-x-3">
      <% if back_path %>
        <%= link_to back_path, class: "flex w-8 h-8 shrink-0 grow-0 items-center justify-center rounded-lg bg-alpha-black-50 focus:outline-gray-300 focus:outline" do %>
          <%= lucide_icon("arrow-left", class: "text-gray-500 w-5 h-5") %>
        <% end %>
      <% end %>

      <span class="text-gray-400"><%= title %></span>
    </div>

    <div class="p-2">
      <button hidden data-controller="hotkey" data-hotkey="k,K,ArrowUp,ArrowLeft" data-action="list-keyboard-navigation#focusPrevious">Previous</button>
      <button hidden data-controller="hotkey" data-hotkey="j,J,ArrowDown,ArrowRight" data-action="list-keyboard-navigation#focusNext">Next</button>

      <%= yield %>
    </div>

    <div class="border-t border-alpha-black-25 p-4 text-gray-500 text-sm flex justify-between">
      <div class="flex space-x-5">
        <div class="flex items-center space-x-2">
          <span>Select</span>
          <kbd class="bg-alpha-black-50 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.1)] p-1 rounded-md flex w-5 h-5 shrink-0 grow-0 items-center justify-center"><%= lucide_icon("corner-down-left", class: "inline w-3 h-3") %></kbd>
        </div>
        <div class="flex items-center space-x-2">
          <span>Navigate</span>
          <kbd class="bg-alpha-black-50 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.1)] p-1 rounded-md flex w-5 h-5 shrink-0 grow-0 items-center justify-center"><%= lucide_icon("arrow-up", class: "inline w-3 h-3") %></kbd>
          <kbd class="bg-alpha-black-50 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.1)] p-1 rounded-md flex w-5 h-5 shrink-0 grow-0 items-center justify-center"><%= lucide_icon("arrow-down", class: "inline w-3 h-3") %></kbd>
        </div>
      </div>
      <div class="flex items-center space-x-2">
        <button data-action="modal#close">Close</button>
        <kbd class="bg-alpha-black-50 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.1)] p-1 rounded-md flex w-8 h-5 shrink-0 grow-0 items-center justify-center text-xs">ESC</kbd>
      </div>
    </div>
  </div>
<% end %>
