exshome

<section
  id="modal"
  class="fade-in hidden fixed z-50 inset-0 bg-black/40 dark:bg-gray-600/80 md:p-[15vmin]"
>
  <div
    id="modal-content"
    class="fade-in-scale relative h-full w-full md:rounded-xl bg-white dark:bg-gray-900 shadow-lg shadow-gray-700 dark:shadow-gray-400 p-[1em] pb-[3.5em] overflow-hidden"
    phx-click-away="modal:close"
    phx-window-keydown="modal:close"
    phx-key="escape"
  >
    <div id="modal-header" class="overflow-hidden">
      <button class="cursor-pointer float-right" phx-click="modal:close">❌</button>
    </div>
    <%= if @modal do %>
      <%= live_render(@socket, @modal.module,
        id: "modal-data",
        session: @modal.params,
        container: {:div, class: "w-full h-full"}
      ) %>
    <% end %>
  </div>
</section>

<main class="h-full flex flex-col justify-between">
  <%= render("_header.html", socket: @socket, live_action: @live_action) %>

  <%= if info_message = live_flash(@flash, :info) do %>
    <p class="alert alert-info" role="alert" phx-click="lv:clear-flash" phx-value-key="info">
      <%= info_message %>
    </p>
  <% end %>

  <%= if error_message = live_flash(@flash, :error) do %>
    <p class="alert alert-danger" role="alert" phx-click="lv:clear-flash" phx-value-key="info">
      <%= error_message %>
    </p>
  <% end %>

  <div class="grow overflow-y-auto">
    <%= @inner_content %>
  </div>

  <%= render("_footer.html", socket: @socket, live_action: @live_action) %>
</main>