<!DOCTYPE html>
<html class='h-full'>
  <head>
    <title>ReFurrer</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <% if Object.const_defined?("Rack::MiniProfiler") %>
      <% # needed so miniprofiler doens't screw with the fetch() api %>
      <script type='text/javascript'>
        if(!window.MiniProfiler) {
          window.MiniProfiler = {};
        }
        window.MiniProfiler.patchesApplied = true;
      </script>
    <% end %>
    <%= favicon_link_tag "refurrer-logo-icon.png" %>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <%= javascript_pack_tag "application-bundle" %>
    <%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
    <%= yield :head %>
  </head>
  <body class="mx-0 flex flex-col h-full">
    <header class="bg-slate-100 border-slate-200 border-b-2">
      <div class="mx-auto max-w-5xl py-6 px-6 sm:px-8 flex items-baseline">
        <span class="flex flex-col gap-2">
          <h1 class="text-4xl sm:text-5xl font-bold text-slate-900">
            <%= link_to root_path, class: "flex items-center" do %>
              <%= image_tag asset_path("refurrer-logo-md.png"), class: "w-12 h-12 mr-2" %>
              <span class="text-4xl sm:text-5xl font-bold text-slate-900">
                ReFurrer
              </span>
            <% end %>
          </h1>
          <% if policy(IpAddressRole).view_debug_info? %>
            <span class="font-mono text-slate-500">
              <span>IP address</span>
              <span class="font-mono text-slate-700">
                <%= request.remote_ip %>
              </span>
            </span>
            <span class="font-mono text-slate-500">
              <span>
                <%= link_to "IP Address Role", state_ip_address_roles_path, class: "text-blue-500 hover:text-blue-700" %>
              </span>
              <span class="font-mono text-slate-700 relative group">
                <% if role = current_ip_address_role %>
                  <%= role.ip_address %> / <%= role.role %>
                  <% if role.description.present? %>
                    <div class="absolute hidden group-hover:block bg-slate-800 text-white text-sm rounded px-2 py-1 top-full left-0 mt-1 whitespace-nowrap z-10">
                      <%= role.description %>
                    </div>
                  <% end %>
                <% else %>
                  None
                <% end %>
              </span>
            </span>
          <% end %>
        </span>
        <div class="flex-grow"></div>
        <nav class="flex items-center space-x-4">
          <% if user_signed_in? %>
            <%= react_component("UserMenu", prerender: true, strict_mode: true, props: {
              userEmail: current_user.email,
              userRole: current_user.role,
              editProfilePath: edit_user_registration_path,
              signOutPath: destroy_user_session_path,
              csrfToken: form_authenticity_token,
              globalStatesPath: global_states_path,
              goodJobPath: good_job_path,
              grafanaPath: grafana_path,
              prometheusPath: prometheus_path
            }) %>
          <% else %>
            <%= link_to new_user_session_path, class: "text-slate-600 hover:text-slate-900" do %>
              <i class="fas fa-sign-in-alt mr-1"></i>
              Sign In
            <% end %>
            <%= link_to new_user_registration_path, class: "text-slate-600 hover:text-slate-900" do %>
              <i class="fas fa-user-plus mr-1"></i>
              Sign Up
            <% end %>
          <% end %>
        </nav>
        <h2 class="text-1xl sm:text-2xl italic font-bold text-slate-500 ml-4">
          Furry Swiss Army Knife
        </h2>
      </div>
    </header>
    <main class="flex flex-col grow bg-slate-200">
      <% if notice %>
        <p class="notice bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative" role="alert"><%= notice %></p>
      <% end %>
      <% if alert %>
        <p class="alert bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative" role="alert"><%= alert %></p>
      <% end %>
      <%= yield %>
    </main>
  </body>
</html>
