<!DOCTYPE html>
<html>
  <head>
    <title><%= content_for(:title) || "Admin Dashboard" %> - Sanasto Wiki</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <%= stylesheet_link_tag :app, "data-turbo-track": "reload" %>
    <%= javascript_importmap_tags %>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>

  <body class="bg-slate-50 text-gray-900 font-sans antialiased">
    <div class="min-h-screen flex flex-col">
      <!-- Header -->
      <header class="bg-white border-b border-slate-200">
        <div class="max-w-7xl mx-auto px-4">
          <div class="h-16 flex items-center justify-between">
            <div class="flex items-center gap-2">
              <span class="text-xl font-bold tracking-tight text-indigo-600">Sanasto</span>
              <span class="text-xl font-light text-slate-400">Admin</span>
            </div>
            <nav class="flex items-center gap-3">
              <%= link_to "Dashboard", admin_dashboard_path, class: "text-sm font-medium text-slate-600 hover:text-indigo-600 transition" %>
              <%= link_to "Users", admin_users_path, class: "text-sm font-medium text-slate-600 hover:text-indigo-600 transition" %>
              <%= link_to "Invitations", admin_invitations_path, class: "text-sm font-medium text-slate-600 hover:text-indigo-600 transition" %>
              <%= link_to "Back to Site", root_path, class: "text-sm font-medium text-slate-600 hover:text-indigo-600 transition" %>
              <%= button_to "Log Out", logout_path, method: :delete, form: { data: { turbo: false }, style: "display: inline-block;" }, class: "bg-indigo-600 text-white px-4 py-2 rounded-lg text-sm font-semibold hover:bg-indigo-700 transition cursor-pointer" %>
            </nav>
          </div>
        </div>
      </header>

      <!-- Flash messages -->
      <% if flash.any? %>
        <div class="max-w-7xl mx-auto px-4 mt-4">
          <% flash.each do |type, message| %>
            <div class="<%= type == 'notice' ? 'bg-green-50 border border-green-200 text-green-700' : 'bg-red-50 border border-red-200 text-red-700' %> px-4 py-3 rounded-lg mb-4" role="alert">
              <span class="block sm:inline"><%= message %></span>
            </div>
          <% end %>
        </div>
      <% end %>

      <!-- Main content -->
      <main class="flex-1 max-w-7xl w-full mx-auto px-4 py-8">
        <%= yield %>
      </main>
    </div>
  </body>
</html>
