<!DOCTYPE html>
<html lang="<%= I18n.locale %>" data-bs-theme="auto">
  <head>
    <title>Good Job Dashboard</title>
    <meta charset="utf-8" />
    <meta
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
      name="viewport"
    />
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <%# Bootstrap Color Modes
      "It is suggested to include the JavaScript at the top of your page
      to reduce potential screen flickering during reloading of your site."
      https://getbootstrap.com/docs/5.3/customize/color-modes/#javascript %>
    <script nonce="<%= content_security_policy_nonce %>">
      let theme = localStorage.getItem('good_job-theme');
      if (!['light', 'dark'].includes(theme)) {
        theme = window.matchMedia('(prefers-color-scheme: dark)').matches
          ? 'dark'
          : 'light';
      }
      document.documentElement.setAttribute('data-bs-theme', theme);
    </script>

    <%# Do not use asset tag helpers to avoid paths being overriden by config.asset_host %>
    <%= tag.link rel: "stylesheet",
                 href: frontend_static_path(:bootstrap, format: :css, locale: nil),
                 nonce: content_security_policy_nonce %>
    <%= tag.link rel: "stylesheet",
                 href: frontend_static_path(:style, format: :css, locale: nil),
                 nonce: content_security_policy_nonce %>
    <%= tag.script "",
                   src: frontend_static_path(:bootstrap, format: :js, locale: nil),
                   nonce: content_security_policy_nonce %>
    <%= tag.script "",
                   src: frontend_static_path(:chartjs, format: :js, locale: nil),
                   nonce: content_security_policy_nonce %>
    <%= tag.script "",
                   src: frontend_static_path(:rails_ujs, format: :js, locale: nil),
                   nonce: content_security_policy_nonce %>
    <%= tag.script "",
                   src:
                     frontend_static_path(:es_module_shims, format: :js, locale: nil),
                   async: true,
                   nonce: content_security_policy_nonce %>
    <% importmaps =
         GoodJob::FrontendsController.js_modules.keys.index_with do |module_name|
           frontend_module_path(module_name, format: :js, locale: nil)
         end %>
    <%= tag.script(
          { imports: importmaps }.to_json.html_safe,
          type: "importmap",
          nonce: content_security_policy_nonce,
        ) %>
    <%= tag.script "", type: "module", nonce: content_security_policy_nonce do %>
      import "application";
    <% end %>
    <%= stylesheet_link_tag "good_job_custom", nonce: content_security_policy_nonce %>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"
      nonce="<%= content_security_policy_nonce %>"
    />
  </head>
  <body>
    <div class="d-flex flex-column min-vh-100">
      <%= render "good_job/shared/navbar" %>
      <%= render "good_job/shared/secondary_navbar" %>
      <div class="container-fluid flex-grow-1 relative">
        <%= render "good_job/shared/alert" %>
        <%= yield %>
      </div>
      <%= render "good_job/shared/footer" %>
    </div>
  </body>
</html>
