<!DOCTYPE html>

<% theme = Current.user&.theme || "system" %>

<html
  lang="en"
  data-theme="<%= theme %>"
  data-controller="theme viewport"
  data-theme-user-preference-value="<%= Current.user&.theme || "system" %>"
  class="h-[var(--app-height, 100dvh)] text-primary bg-surface overflow-hidden overscroll-none font-sans <%= @os %>">
  <head>
    <%= render "layouts/shared/head" %>
    <%= yield :head %>
  </head>

  <body class="h-[var(--app-height)] overflow-hidden antialiased">
    <% if Rails.env.development? %>
      <button hidden data-controller="hotkey" data-hotkey="t t /" data-action="theme#toggle"></button>
    <% end %>

    <div class="fixed z-50 top-6 md:top-4 left-1/2 -translate-x-1/2 w-full md:w-80 px-4 md:px-0 mx-auto md:mx-0 md:right-auto pt-[env(safe-area-inset-top)]">
      <div id="notification-tray" class="space-y-1 w-full">
        <%= render_flash_notifications %>

        <div id="cta"></div>
      </div>
    </div>

    <% if Current.family %>
      <%= turbo_stream_from Current.family %>
    <% end %>

    <%= turbo_frame_tag "modal" %>
    <%= turbo_frame_tag "drawer" %>

    <%# Custom overrides for browser's confirm API  %>
    <%= render "layouts/shared/confirm_dialog" %>

    <%= render "impersonation_sessions/super_admin_bar" if Current.true_user&.super_admin? && show_super_admin_bar? %>
    <%= render "impersonation_sessions/approval_bar" if Current.true_user&.impersonated_support_sessions&.initiated&.any? %>

    <%= yield %>
  </body>
</html>
