<!DOCTYPE html>
<html>
  <head>
    <title>FamilyBudget</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %>

    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
    <%= javascript_importmap_tags %>
  </head>

  <body>
    <nav class="w-full py-4 px-4 md:px-6 bg-gray-900">
      <input type="checkbox" id="mobile-menu" class="peer hidden" />
      <div class="flex items-center justify-between">
        <div class="flex items-center flex-shrink-0">
          <%= link_to root_path, class: "mr-4 md:mr-8" do %>
            <%= image_tag "logo.svg", alt: "Family Funds Logo", class: "h-8" %>
          <% end %>
        </div>

        <!-- Desktop menu -->
        <div class="hidden lg:flex items-center flex-grow justify-center">
          <ul class="flex space-x-6">
          <% if Current.user.registered? %>
            <li><%= link_to "Dashboard", root_path, class: "text-white hover:text-gray-300" %></li>
            <li><%= link_to "Expenses", expenses_path, class: "text-white hover:text-gray-300" %></li>
            <li><%= link_to "Credit Card Bills", credit_card_bills_path, class: "text-white hover:text-gray-300" %></li>
            <li><%= link_to "Incomes", incomes_path, class: "text-white hover:text-gray-300" %></li>
            <li><%= link_to "Members", members_path, class: "text-white hover:text-gray-300" %></li>
          <% else %>
            <li><%= link_to "Sign up", new_user_path, class: "text-white hover:text-gray-300" %></li>
            <li><%= link_to "Log in", new_session_path, class: "text-white hover:text-gray-300" %></li>
          <% end %>
          </ul>
        </div>

        <div class="flex items-center space-x-4 flex-shrink-0">
          <!-- Hamburger menu button -->
          <label for="mobile-menu"
            class="lg:hidden text-white hover:text-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-300 rounded-lg p-2 cursor-pointer"
          >
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
            </svg>
          </label>

          <% if Current.user.registered? %>
            <%= render 'shared/user_dropdown' %>
          <% end %>
        </div>
      </div>

      <!-- Mobile menu -->
      <div class="lg:hidden mt-4 hidden peer-checked:block">
        <div class="border-t border-gray-700 pt-4">
          <ul class="space-y-2">
          <% if Current.user.registered? %>
            <li><%= link_to "Dashboard", root_path, class: "block text-white hover:text-gray-300 hover:bg-gray-800 px-3 py-2 rounded-md text-base font-medium" %></li>
            <li><%= link_to "Expenses", expenses_path, class: "block text-white hover:text-gray-300 hover:bg-gray-800 px-3 py-2 rounded-md text-base font-medium" %></li>
            <li><%= link_to "Credit Card Bills", credit_card_bills_path, class: "block text-white hover:text-gray-300 hover:bg-gray-800 px-3 py-2 rounded-md text-base font-medium" %></li>
            <li><%= link_to "Incomes", incomes_path, class: "block text-white hover:text-gray-300 hover:bg-gray-800 px-3 py-2 rounded-md text-base font-medium" %></li>
            <li><%= link_to "Members", members_path, class: "block text-white hover:text-gray-300 hover:bg-gray-800 px-3 py-2 rounded-md text-base font-medium" %></li>
          <% else %>
            <li><%= link_to "Sign up", new_user_path, class: "block text-white hover:text-gray-300 hover:bg-gray-800 px-3 py-2 rounded-md text-base font-medium" %></li>
            <li><%= link_to "Log in", new_session_path, class: "block text-white hover:text-gray-300 hover:bg-gray-800 px-3 py-2 rounded-md text-base font-medium" %></li>
          <% end %>
          </ul>
        </div>
      </div>
    </nav>

    <% if flash.any? %>
      <% flash.each do |type, msg| %>
        <div class="py-2 px-4 font-bold msg-<%= type %>">
          <%= msg %>
        </div>
      <% end %>
    <% end %>

    <main class="container mx-auto mt-28 px-5 flex">
      <%= yield %>
    </main>
  </body>
</html>