<!DOCTYPE html>
<html data-theme="light">
  <head>
    <title><%= content_for(:title) || "Hack Club Auth" %></title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="mobile-web-app-capable" content="yes">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <%= yield :head %>
    <script>
      (function() {
        const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
        const defaultTheme = systemPrefersDark ? "dark" : "light";
        const savedTheme = localStorage.getItem("theme") || defaultTheme;
        document.documentElement.dataset.theme = savedTheme;
      })();
    </script>
    <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">
    <%= vite_client_tag %>
    <%= vite_stylesheet_tag "application.css" %>
    <%= vite_javascript_tag 'application' %>
    <meta name="htmx-config" content='{"getCacheBusterParam":true}'>
  </head>
  <body hx-headers='{"X-CSRF-Token": "<%= form_authenticity_token %>"}' hx-boost="false">
  <% if signed_in? %>
  <div class="app-layout">
  <%= render Components::Sidebar.new(current_path: request.path) %>
  <div class="main-content">
  <main class="container">
  <div class="mobile-brand">
    <%= render Components::Brand.new(identity: current_identity) %>
  </div>
  <%= render "shared/flash" %>
  <span id="async_flash"></span>
    <%= yield %>
      <%= render Components::Footer.new %>
      </main>
      </div>
  </div>
  <% else %>
  <main class="container">
  <%= render Components::Brand.new(identity: current_identity) %>
  <%= render "shared/flash" %>
  <span id="async_flash"></span>
    <%= yield %>
      <%= render Components::Footer.new %>
    </main>
  <% end %>
  <% unless Rails.env.production? %>
      <div class="environment <%= Rails.env %>" />
    <% end %>
  </body>
  </html>
