<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1">
<meta name="turbo-cache-control" content="no-cache">
<meta name="viewport" content="width=device-width, initial-scale=1">

<%= vite_client_tag %>
<%= vite_javascript_tag 'portal' %>
<style>
  .appearance-menu[data-current-theme="system"] .check-mark-icon:is(.light-theme, .dark-theme),
  .appearance-menu[data-current-theme="dark"] .check-mark-icon:is(.light-theme, .system-theme),
  .appearance-menu[data-current-theme="light"] .check-mark-icon:is(.dark-theme, .system-theme) {
    display: none;
  }
</style>
<%= csrf_meta_tags %>
<% if content_for?(:head) %>
  <%= yield(:head) %>
<% else %>
  <title><%= @portal.display_title(@locale) %></title>
<% end %>

<% if @portal.logo.present? %>
  <link rel="icon" href="<%= url_for(@portal.logo) %>">
<% end %>

<% unless @theme_from_params.blank? %>
<%# this adds the theme from params, ensuring that there a localstorage value set %>
<%# this will further trigger the next script to ensure color mode is toggled without a FOUC %>
<script>localStorage.theme = '<%= @theme_from_params %>';</script>
<% end %>

<script>
  if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
    // we can use document.body here but that would mean pushing this script inside the body
    // since the body is not created yet. This is done to avoid FOUC, at a tiny cost of Time to Interactive
    document.documentElement.classList.add('dark')
  } else {
    document.documentElement.classList.remove('dark')
    document.documentElement.classList.add('light')
  }
</script>
