<!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' %>
  </head>
  <%
    body_style = content_for?(:body_style) ? yield(:body_style) : nil
    portal_scenario = respond_to?(:portal_onboarding_scenario) ? portal_onboarding_scenario : nil
  %>
  <body class="<%= content_for?(:portal_wrapper) ? '' : (content_for?(:body_class) ? yield(:body_class) : 'auth-layout') %>" hx-headers='{"X-CSRF-Token": "<%= form_authenticity_token %>"}' hx-boost="false"<%= " style=\"#{body_style}\"".html_safe if body_style %>>
    <%= render "shared/scenario_background_style", scenario: portal_scenario %>
    <% if content_for?(:portal_wrapper) %>
      <main class="container portal-container">
        <%= render Components::Brand.new(identity: current_identity, logo_path: portal_scenario&.logo_path) %>
        <%= render "shared/flash" %>
        <span id="async_flash"></span>
        <%= yield %>
      </main>
    <% else %>
      <button id="lightswitch" class="lightswitch-btn" type="button" aria-label="Toggle theme">
        <span class="lightswitch-moon"><%= inline_icon("moon-fill", size: 16) %></span>
        <span class="lightswitch-sun" style="display: none;"><%= inline_icon("sun", size: 16) %></span>
      </button>
      <div class="auth-flash-wrapper">
        <%= render "shared/flash" %>
        <span id="async_flash"></span>
      </div>
      <%= yield %>
    <% end %>
    <% unless Rails.env.production? %>
      <div class="environment <%= Rails.env %>" />
    <% end %>
  </body>
</html>
