<!DOCTYPE html>
<html lang="en" class="h-full dark">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="csrf-token" content="{{ csrf_token }}">
  <title>{% block title %}Fossilrepo{% endblock %}</title>
  <script>
    // Apply theme before anything renders to prevent flash
    (function() {
      var theme = localStorage.getItem('theme');
      if (theme === 'light') {
        document.documentElement.classList.remove('dark');
      } else {
        document.documentElement.classList.add('dark');
      }
    })();
  </script>
  <script src="https://cdn.tailwindcss.com?plugins=typography"></script>
  {% block extra_head %}{% endblock %}
  <script>
    tailwind.config = {
      darkMode: 'class',
      theme: {
        extend: {
          colors: {
            brand: {
              DEFAULT: '#DC394C',
              dark: '#8B3138',
              hover: '#c42d3f',
              light: '#e8677a',
            }
          }
        }
      }
    }
  </script>
  <style type="text/tailwindcss">
    @layer base {
      input[type="text"], input[type="number"], input[type="email"],
      input[type="password"], input[type="search"], input[type="url"],
      textarea, select {
        @apply bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600
               text-gray-900 dark:text-gray-100 rounded-md
               px-3 py-2
               shadow-sm dark:shadow-inner
               focus:border-brand focus:ring-1 focus:ring-brand
               placeholder-gray-500 dark:placeholder-gray-500
               transition-colors duration-150
               sm:text-sm;
      }
    }
  </style>
  <style>
    /* Hide scrollbar on horizontal-scroll navs (tabs, filter pills) */
    .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .scrollbar-hide::-webkit-scrollbar { display: none; }
    /* Focus visible outlines for keyboard navigation */
    a:focus-visible, button:focus-visible, [role="button"]:focus-visible {
      outline: 2px solid #DC394C;
      outline-offset: 2px;
      border-radius: 4px;
    }
    /* HTMX loading indicator: hidden by default, shown when htmx is in flight */
    .htmx-indicator { display: none; }
    .htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline-flex; }
    /* Spinner next to search inputs during HTMX requests */
    .search-wrap { position: relative; display: inline-flex; align-items: center; }
    .search-wrap .search-spinner {
      position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
      display: none; color: #6b7280;
    }
    .search-wrap:has(input.htmx-request) .search-spinner,
    .search-wrap.htmx-request .search-spinner { display: block; }
  </style>
  <style>
    /*
     * Light mode — matches Django admin dark_theme.css palette
     * Brand: #DC394C red, #8B3138 crimson, #2B2D2C charcoal
     * Nav bar stays dark. Only main content area switches.
     */
    html:not(.dark) body { background-color: #f8f8f8; color: #1a1a1a; }
    /* Surfaces */
    html:not(.dark) main .bg-gray-950 { background-color: #f8f8f8 !important; }
    html:not(.dark) main .bg-gray-900 { background-color: #eeeeee !important; }
    html:not(.dark) main .bg-gray-800 { background-color: #ffffff !important; }
    html:not(.dark) main .bg-gray-700 { background-color: #eeeeee !important; }
    html:not(.dark) main .bg-gray-800\/50,
    html:not(.dark) main .hover\:bg-gray-800\/50:hover { background-color: #eeeeee !important; }
    html:not(.dark) main .hover\:bg-gray-800:hover { background-color: #eeeeee !important; }
    html:not(.dark) main .hover\:bg-gray-700:hover { background-color: #e0e0e0 !important; }
    html:not(.dark) main .hover\:bg-gray-700\/50:hover { background-color: #eeeeee !important; }
    html:not(.dark) main .hover\:bg-gray-600:hover { background-color: #e0e0e0 !important; }
    /* Text */
    html:not(.dark) main .text-gray-100 { color: #1a1a1a !important; }
    html:not(.dark) main .text-gray-200 { color: #1a1a1a !important; }
    html:not(.dark) main .text-gray-300 { color: #666666 !important; }
    html:not(.dark) main .text-gray-400 { color: #666666 !important; }
    html:not(.dark) main .text-gray-500 { color: #a8aaa9 !important; }
    html:not(.dark) main .hover\:text-white:hover { color: #000000 !important; }
    html:not(.dark) main .hover\:text-gray-200:hover { color: #1a1a1a !important; }
    /* Borders — matches --hairline-color / --border-color */
    html:not(.dark) main .border-gray-700 { border-color: #e0e0e0 !important; }
    html:not(.dark) main .border-gray-600 { border-color: #e0e0e0 !important; }
    html:not(.dark) main .divide-gray-700 > :not([hidden]) ~ :not([hidden]) { border-color: #e0e0e0 !important; }
    html:not(.dark) main .ring-gray-700 { --tw-ring-color: #e0e0e0 !important; }
    html:not(.dark) main .ring-gray-600 { --tw-ring-color: #e0e0e0 !important; }
    html:not(.dark) main .shadow-sm { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) !important; }
    /* Status badges — matches admin message colors */
    html:not(.dark) main .bg-green-900\/50 { background-color: #d4edda !important; }
    html:not(.dark) main .text-green-300 { color: #155724 !important; }
    html:not(.dark) main .border-green-700 { border-color: #c3e6cb !important; }
    html:not(.dark) main .bg-yellow-900\/50 { background-color: #fff3cd !important; }
    html:not(.dark) main .text-yellow-300 { color: #856404 !important; }
    html:not(.dark) main .text-yellow-400 { color: #856404 !important; }
    html:not(.dark) main .bg-purple-900\/50 { background-color: #f3e8ff !important; }
    html:not(.dark) main .text-purple-300 { color: #9333ea !important; }
    html:not(.dark) main .bg-blue-900\/50 { background-color: #dbeafe !important; }
    html:not(.dark) main .text-blue-300 { color: #2563eb !important; }
    html:not(.dark) main .bg-red-900\/50 { background-color: #f8d7da !important; }
    html:not(.dark) main .text-red-300 { color: #721c24 !important; }
    html:not(.dark) main .border-red-700 { border-color: #f5c6cb !important; }
    html:not(.dark) main .text-red-400 { color: #c0392b !important; }
    html:not(.dark) main .hover\:text-red-300:hover { color: #721c24 !important; }
    /* Mono text */
    html:not(.dark) main .font-mono { color: #666666 !important; }
    /* Prose — matches admin link/text colors */
    html:not(.dark) main .prose-invert { --tw-prose-body: #1a1a1a; --tw-prose-headings: #000000; --tw-prose-links: #DC394C; --tw-prose-bold: #000000; --tw-prose-code: #1a1a1a; --tw-prose-th-borders: #e0e0e0; --tw-prose-td-borders: #e0e0e0; }
    /* Brand links — matches admin --link-fg */
    html:not(.dark) main .text-brand-light { color: #DC394C !important; }
    html:not(.dark) main .hover\:text-brand:hover { color: #8B3138 !important; }
    html:not(.dark) main .hover\:border-brand:hover { border-color: #DC394C !important; }
    /* Selected/hover rows — matches admin --selected-bg */
    html:not(.dark) main .group:hover { border-color: #DC394C !important; }
  </style>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css">
  <style>
    /* highlight.js github-dark sets a dark background on .hljs code blocks. Since
       our code viewer renders each line as its own <code class="hljs"> element,
       this creates individual dark boxes per line. We own the background already. */
    .hljs { background: transparent !important; }
    .hljs-section, .hljs-keyword { background: transparent !important; }
  </style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/3.1.6/purify.min.js"></script>
  <script src="https://unpkg.com/htmx.org@2.0.4"></script>
  <script defer src="https://unpkg.com/alpinejs@3.14.8/dist/cdn.min.js"></script>
  <script>
    document.body.addEventListener('htmx:configRequest', function(event) {
      var token = document.querySelector('meta[name="csrf-token"]');
      if (token) { event.detail.headers['X-CSRFToken'] = token.content; }
    });
    // Keyboard shortcut: / to open search
    document.addEventListener('keydown', function(e) {
      if (e.key === '/' && !e.ctrlKey && !e.metaKey && document.activeElement.tagName !== 'INPUT' && document.activeElement.tagName !== 'TEXTAREA') {
        e.preventDefault();
        document.querySelector('[x-ref="searchInput"]')?.closest('[x-data]')?.__x?.$data && (document.querySelector('[x-ref="searchInput"]').closest('[x-data]').__x.$data.open = true);
        setTimeout(() => document.querySelector('[x-ref="searchInput"]')?.focus(), 100);
      }
    });
  </script>
</head>
<body class="h-full bg-gray-950 text-gray-100" hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'>
  <div class="min-h-full flex flex-col" x-data="{ mobileSidebar: false }">
    {% if user.is_authenticated %}
    {% include "includes/nav.html" %}
    {% else %}
    {% include "includes/nav_public.html" %}
    {% endif %}

    <div class="flex flex-1 overflow-hidden">
      {% if user.is_authenticated %}
      <!-- Mobile sidebar overlay -->
      <div x-show="mobileSidebar" x-transition:enter="transition-opacity ease-out duration-200" x-transition:leave="transition-opacity ease-in duration-150"
           class="fixed inset-0 z-40 bg-black/50 lg:hidden" @click="mobileSidebar = false" style="display:none"></div>
      <div x-show="mobileSidebar" x-transition:enter="transition-transform ease-out duration-200" x-transition:enter-start="-translate-x-full" x-transition:enter-end="translate-x-0"
           x-transition:leave="transition-transform ease-in duration-150" x-transition:leave-start="translate-x-0" x-transition:leave-end="-translate-x-full"
           class="fixed inset-y-0 left-0 z-50 w-64 lg:hidden" style="display:none">
        {% include "includes/sidebar.html" %}
      </div>
      <!-- Desktop sidebar -->
      {% include "includes/sidebar.html" %}
      {% endif %}

      <main class="flex-1 overflow-y-auto py-6">
        <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          {% if messages %}
          <div id="messages" class="mb-4 space-y-2">
            {% for message in messages %}
            <div x-data="{ show: true }" x-show="show" x-init="setTimeout(() => show = false, 4000)"
                 x-transition role="status" class="rounded-md p-4 {% if message.tags == 'success' %}bg-green-900/50 text-green-300 border border-green-700{% elif message.tags == 'error' %}bg-red-900/50 text-red-300 border border-red-700{% else %}bg-gray-800 text-gray-300 border border-gray-700{% endif %}">
              <div class="flex justify-between">
                <p class="text-sm font-medium">{{ message }}</p>
                <button @click="show = false" aria-label="Dismiss" class="ml-3 text-sm font-medium underline">&times;</button>
              </div>
            </div>
            {% endfor %}
          </div>
          {% endif %}

          {% block content %}{% endblock %}
        </div>
      </main>
    </div>
  </div>
  {% include "fossil/_keyboard_help.html" %}
</body>
</html>
