<%# locals: (content:, reload_on_close: false) %>

<%= turbo_frame_tag "drawer" do %>
  <dialog class="ml-auto bg-white shadow-border-xs rounded-2xl max-w-[480px] h-full w-full mt-4 mr-4 focus-visible:outline-hidden"
    data-controller="modal"
    data-action="click->modal#clickOutside"
    data-modal-reload-on-close-value="<%= reload_on_close %>">
    <div class="flex flex-col h-full">
      <div class="flex justify-end items-center p-4">
        <div data-action="click->modal#close" class="cursor-pointer p-2">
          <%= lucide_icon("x", class: "w-5 h-5 shrink-0") %>
        </div>
      </div>
      <div class="flex-1 overflow-y-auto px-4 pb-4">
        <%= content %>
      </div>
    </div>
  </dialog>
<% end %>
