<!DOCTYPE html>
<html lang="en" class="h-full">
  <head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <%= csrf_meta_tag() %>
    <%= live_title_tag assigns[:page_title] || "Lit", suffix: " Admin" %>
    <link phx-track-static rel="stylesheet" href="<%= Routes.static_path(@conn, "/css/app.css") %>"/>
    <script defer phx-track-static type="text/javascript" src="<%= Routes.static_path(@conn, "/js/app.js") %>"></script>
  </head>
  <body class="flex flex-col h-full pt-32 bg-gray-100">
    <header class="fixed top-0 left-0 right-0 z-30 shadow">
      <div class="text-white bg-yellow-600">
        <div class="container relative flex justify-end w-full max-w-6xl px-4 py-2 mx-auto lg:px-0">
          <div class="">
            <div x-data="{ open: false }" @keydown.escape="open = false" @click.away="open = false" class="relative inline-block text-left">
              <div>
                <button @click="open = !open" class="flex items-center text-sm text-white hover:text-gray-100 focus:outline-none focus:text-gray-100">
                  andreas@codered.se
                </button>
              </div>

              <div x-show="open" class="absolute right-0 w-56 mt-2 shadow-lg origin-top-right rounded-md">
                <div class="absolute right-0 z-20 w-48 py-2 mt-2 bg-white shadow-xl rounded-md">
                  <a href="#" class="block px-4 py-2 text-sm text-gray-700 capitalize hover:bg-blue-500 hover:text-white">
                    Settings
                  </a>
                  <a href="#" class="block px-4 py-2 text-sm text-gray-700 capitalize hover:bg-blue-500 hover:text-white">
                    Sign Out
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="bg-white">
        <div x-data="{ open: false }" class="container w-full max-w-6xl px-4 py-2 mx-auto md:justify-start md:flex md:items-center lg:px-0">
          <div class="flex items-center justify-between">
            <a href="#" class="text-2xl font-extrabold text-orange-600">Lit<span class="text-gray-800">Admin</span></a>

            <div class="flex md:hidden">
              <button @click="open = !open" type="button" class="text-gray-500 hover:text-gray-600 focus:outline-none focus:text-gray-600">
                <svg viewBox="0 0 24 24" class="w-6 h-6 fill-current">
                  <path fill-rule="evenodd" d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"></path>
                </svg>
              </button>
            </div>
          </div>

          <div :class="{ 'block': open === true, 'hidden': open !== true }" class="items-center md:flex">
            <nav id="nav-links" class="flex flex-col mt-4 md:mt-0 md:flex-row md:mx-6">
              <!-- ADD NAVIGATION LINKS HERE -->
              <a class="py-1 my-1 text-sm font-medium text-gray-700 md:py-0 hover:text-blue-400 focus:outline-none md:mx-3 md:my-0" href="#">Home</a>

              <%= if function_exported?(Routes, :live_dashboard_path, 2) do %>
                <%= link "LiveDashboard", to: Routes.live_dashboard_path(@conn, :home), class: "py-1 my-1 text-sm font-medium text-gray-700 md:py-0 hover:text-blue-400 focus:outline-none md:mx-3 md:my-0" %>
              <% end %>
            </nav>
          </div>
        </div>
      </div>
    </header>

    <%= Lit.FlashView.render("_flash_messages.html", assigns) %>
    <%= @inner_content %>

    <footer class="py-6 mt-auto text-gray-600 bg-gray-800 footer">
      <div class="container max-w-6xl px-4 mx-auto text-center">
        <a href="#" class="text-2xl font-extrabold text-orange-600">Lit<span class="text-gray-400">Admin</span></a>
      </div>
    </footer>
  </body>
</html>
