<!DOCTYPE html>
<html class="h-full">
  <head>
    <title>Kosmos Accounts</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://assets.kosmos.org/fonts/open-sans/open-sans.css" rel="stylesheet">
    <%= stylesheet_link_tag 'application', "data-turbo-track": "reload" %>
    <%= javascript_importmap_tags %>
  </head>
  <body <%= @context.present? ? "id=#{@context}" : "" %> class="h-full <%= @context == :admin ? "bg-red-500" : "bg-sky-900" %>">
    <div class="min-h-full">
      <nav data-controller="topbar">
        <div class="max-w-6xl mx-auto sm:px-6 lg:px-8">
          <div class="border-b border-gray-200/10">
            <div class="flex items-center justify-between h-16 px-4 sm:px-0">
              <div class="flex items-center">
                <div class="ks-site-icon flex-shrink-0">
                  <%= render partial: "shared/icons/comet", locals: { custom_class: "inline-block align-top w-auto h-7" } %>
                </div>
                <% if user_signed_in? && current_user.confirmed? %>
                  <div class="hidden md:block">
                    <div class="ml-10 flex items-baseline space-x-4">
                      <% if @context == :admin %>
                        <%= render partial: 'shared/admin_nav' %>
                      <% else %>
                        <%= render partial: 'shared/main_nav' %>
                      <% end %>
                    </div>
                  </div>
                <% end %>
              </div>
              <div class="hidden md:block">
                <% if user_signed_in? %>
                  <div class="flex items-baseline space-x-4 text-gray-200/80 text-sm font-medium">
                    <span>
                      <strong class="text-white font-normal"><%= current_user.address %></strong>
                    </span>
                    <span>
                      <%= link_to "Log out", destroy_user_session_path, class: 'underline hover:text-white' %>
                    </span>
                  </div>
                <% end %>
              </div>
              <div class="-mr-2 flex md:hidden">
                <% if user_signed_in? && current_user.confirmed? %>
                  <button type="button" id="toggle-mobile-nav"
                          data-action="topbar#toggleMobileNav"
                          class="bg-gray-900/50 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white" aria-controls="mobile-menu" aria-expanded="false">
                    <span class="sr-only">Open main menu</span>
                    <!-- Heroicon name: outline/menu -->
                    <svg data-topbar-target="iconMobileMenuOpen" class="block 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="M4 6h16M4 12h16M4 18h16" />
                    </svg>
                    <!-- Heroicon name: outline/x -->
                    <svg data-topbar-target="iconMobileMenuClose" class="hidden 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>
                <% end %>
              </div>
            </div>
          </div>
        </div>

        <div data-topbar-target="mobileMenu" class="border-b border-gray-200/10 md:hidden">
          <% if user_signed_in? %>
            <div class="px-2 py-3 space-y-1 sm:px-3">
              <% if @context == :admin %>
                <%= render partial: 'shared/admin_nav' %>
              <% else %>
                <%= render partial: 'shared/main_nav' %>
              <% end %>
            </div>
            <div class="pt-4 pb-3 border-t border-gray-200/10">
              <div class="px-5 text-base font-normal text-white">
                <%= current_user.address %></strong>
              </div>
              <div class="mt-3 px-2 space-y-1">
                <%= link_to "Log out", destroy_user_session_path,
                      class: 'block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-900/30 active:text-white active:bg-gray-900/30' %>
              </div>
            </div>
          <% end %>
        </div>
      </nav>

      <div class="fixed inset-0 px-4 py-6 pointer-events-none sm:px-6 sm:py-4 sm:items-start sm:justify-end">
        <div class="flex flex-col items-end justify-center">
          <% flash.each do |type, data| %>
            <%= render NotificationComponent.new(type: type, data: data) %>
          <% end %>
        </div>
      </div>

      <%= yield %>
    </div>
  </body>
</html>
