{% extends "admin/base.html" %}
{% load static forge_icons %}

{% block title %}{{ title }} | {{ forge.brand_name|default:site_header }}{% endblock %}

{% block extrastyle %}
  {{ block.super }}
  <link rel="stylesheet" href="{% static 'django_admin_forge/css/forge.css' %}">
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      darkMode: "class",
      theme: {
        extend: {
          colors: {
            forge: {
              950: "#020617",
              900: "#0f172a",
              800: "#1e293b",
              700: "#334155",
              500: "#3b82f6"
            }
          }
        }
      }
    };
    window.__forgeDefaultTheme = "{{ forge.default_theme|default:'system'|escapejs }}";
  </script>
  <script defer src="{% static 'django_admin_forge/js/theme.js' %}"></script>
{% endblock %}

{% block bodyclass %}forge-admin {{ block.super }}{% endblock %}

{% block messages %}
  {% if messages %}
    <div class="forge-toast-stack" aria-live="polite" aria-atomic="true">
      {% for message in messages %}
        <div class="forge-toast forge-toast-{{ message.tags|default:'info' }}" data-toast>
          <div class="forge-toast-icon">
            {% if "success" in message.tags %}
              {% forge_icon "sparkles" "h-4 w-4" %}
            {% elif "warning" in message.tags %}
              {% forge_icon "activity" "h-4 w-4" %}
            {% elif "error" in message.tags %}
              {% forge_icon "log-out" "h-4 w-4" %}
            {% else %}
              {% forge_icon "layers" "h-4 w-4" %}
            {% endif %}
          </div>
          <div class="forge-toast-body">{{ message|capfirst }}</div>
          <button type="button" class="forge-toast-close" data-toast-close aria-label="Dismiss notification">&times;</button>
        </div>
      {% endfor %}
    </div>
  {% endif %}
{% endblock messages %}

{% block extrahead %}
  {{ block.super }}
  <style>
    :root {
      --forge-accent: {{ forge.accent_hex|default:"#2563eb" }};
      --forge-accent-hover: color-mix(in srgb, var(--forge-accent) 86%, #000 14%);
    }
  </style>
{% endblock %}

{% block extrabody %}
  {{ block.super }}
  {{ forge_search_index|json_script:"forge-search-index" }}
{% endblock %}