<!DOCTYPE html>
<html class="bg-gray-50">
  <head>
    <title><%= content_for(:title) || "Baffle Hub - WAF Analytics" %></title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="application-name" content="Baffle Hub">
    <meta name="mobile-web-app-capable" content="yes">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= yield :head %>

    <link rel="icon" href="/icon.png" type="image/png">
    <link rel="icon" href="/icon.svg" type="image/svg+xml">
    <link rel="apple-touch-icon" href="/icon.png">

    <%# Includes all stylesheet files in app/assets/stylesheets %>
    <%= stylesheet_link_tag :app, "data-turbo-track": "reload" %>
    <%= javascript_importmap_tags %>

    <style>
      /* Custom styles for code blocks and badges */
      code {
        @apply bg-gray-100 px-2 py-1 rounded text-sm font-mono;
      }

      /* Flash message transitions */
      .flash-message {
        animation: slideInDown 0.3s ease-out;
      }

      @keyframes slideInDown {
        from {
          transform: translateY(-100%);
          opacity: 0;
        }
        to {
          transform: translateY(0);
          opacity: 1;
        }
      }
    </style>
  </head>

  <body class="min-h-screen bg-gray-50">
    <!-- Minimal Navigation for Auth Pages -->
    <%= render 'shared/auth_navigation' %>

    <!-- Flash Messages -->
    <% if notice || alert %>
      <div class="fixed top-20 left-0 right-0 z-50 px-4 py-2">
        <% if notice %>
          <div class="flash-message bg-green-50 border border-green-200 text-green-800 px-4 py-3 rounded-md shadow-sm max-w-4xl mx-auto">
            <div class="flex items-center">
              <svg class="w-5 h-5 mr-2 text-green-600" fill="currentColor" viewBox="0 0 24 24">
                <path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
              </svg>
              <%= notice %>
            </div>
          </div>
        <% end %>

        <% if alert %>
          <div class="flash-message bg-red-50 border border-red-200 text-red-800 px-4 py-3 rounded-md shadow-sm max-w-4xl mx-auto">
            <div class="flex items-center">
              <svg class="w-5 h-5 mr-2 text-red-600" fill="currentColor" viewBox="0 0 24 24">
                <path d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"/>
              </svg>
              <%= alert %>
            </div>
          </div>
        <% end %>
      </div>
    <% end %>

    <!-- Main Content -->
    <main class="max-w-md mx-auto px-4 py-8">
      <%= yield %>
    </main>

    <!-- Footer -->
    <footer class="bg-white text-gray-500 mt-12 border-t border-gray-200">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <div class="text-center">
          <p class="text-sm">© <%= Time.current.year %> Baffle Hub - WAF Analytics Platform</p>
        </div>
      </div>
    </footer>
  </body>
</html>