<!doctype html>
<html lang="ru" class="dark">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/png" href="/favi.png">
  <title>{{ title or "VK Parser Admin" }}</title>
  
  <!-- Fonts: Fira Sans (UI) & Fira Code (Data) -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600;700&family=Fira+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  
  <!-- Tailwind CSS via CDN -->
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      darkMode: 'class',
      theme: {
        extend: {
          fontFamily: {
            sans: ['"Fira Sans"', 'sans-serif'],
            mono: ['"Fira Code"', 'monospace'],
          },
          colors: {
            app: {
              bg: '#0F172A',         // slate-900 (Main Background)
              surface: '#1E293B',    // slate-800 (Cards, Sidebar)
              surfaceHover: '#334155', // slate-700
              border: '#334155',     // slate-700
              borderFocus: '#475569',// slate-600
              primary: '#3B82F6',    // blue-500
              primaryHover: '#2563EB',// blue-600
              textMain: '#F8FAFC',   // slate-50
              textMuted: '#94A3B8',  // slate-400
              success: '#10B981',    // emerald-500
              successBg: 'rgba(16, 185, 129, 0.1)',
              warning: '#F59E0B',    // amber-500
              warningBg: 'rgba(245, 158, 11, 0.1)',
              error: '#EF4444',      // red-500
              errorBg: 'rgba(239, 68, 68, 0.1)',
            }
          },
          boxShadow: {
            'glow': '0 0 15px rgba(59, 130, 246, 0.3)',
          }
        }
      }
    }
  </script>
  
  <!-- HTMX & AlpineJS -->
  <script src="https://unpkg.com/htmx.org@1.9.11"></script>
  <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.13.8/dist/cdn.min.js"></script>

  <!-- Lucide Icons -->
  <script src="https://unpkg.com/lucide@latest"></script>

  <style type="text/tailwindcss">
    @layer components {
      /* Form inputs */
      .input {
        @apply bg-app-bg border border-app-border rounded-lg px-3 py-2 text-sm text-app-textMain focus:outline-none focus:border-app-primary focus:ring-1 focus:ring-app-primary transition-colors w-full placeholder:text-app-textMuted;
      }
      .select {
        @apply input appearance-none bg-no-repeat bg-[right_0.5rem_center] bg-[length:1.5em_1.5em];
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2394A3B8' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
      }
      .textarea {
        @apply bg-app-bg border border-app-border rounded-lg px-3 py-2 text-sm text-app-textMain focus:outline-none focus:border-app-primary focus:ring-1 focus:ring-app-primary transition-colors w-full placeholder:text-app-textMuted;
      }
      .checkbox {
        @apply w-4 h-4 rounded border-app-border bg-app-bg text-app-primary focus:ring-app-primary focus:ring-offset-app-surface;
      }
      /* Buttons */
      .btn {
        @apply inline-flex items-center justify-center gap-2 rounded-lg font-medium text-sm px-4 py-2 transition-all disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-app-bg;
      }
      .btn-primary {
        @apply bg-app-primary text-white hover:bg-app-primaryHover focus:ring-app-primary border border-transparent;
      }
      .btn-surface {
        @apply bg-app-surface border border-app-border text-app-textMain hover:bg-app-surfaceHover focus:ring-app-border;
      }
      .btn-ghost {
        @apply text-app-textMuted hover:text-app-textMain hover:bg-app-surfaceHover border border-transparent;
      }
      .btn-danger {
        @apply bg-app-error text-white hover:bg-red-600 focus:ring-app-error border border-transparent;
      }
      .btn-danger-outline {
        @apply bg-transparent border border-app-error text-app-error hover:bg-app-error hover:text-white focus:ring-app-error;
      }
      .btn-primary-outline {
        @apply bg-transparent border border-app-primary text-app-primary hover:bg-app-primary hover:text-white focus:ring-app-primary;
      }
      .btn-sm {
        @apply px-3 py-1.5 text-xs;
      }
      .btn-xs {
        @apply px-2 py-1 text-xs;
      }
      .btn-icon {
        @apply p-2;
      }
      /* Cards */
      .card {
        @apply bg-app-surface border border-app-border rounded-xl shadow-sm overflow-hidden;
      }
      /* Badges */
      .badge {
        @apply inline-flex items-center px-2 py-0.5 rounded text-xs font-medium border;
      }
      .badge-success {
        @apply bg-app-successBg text-app-success border-app-success/20;
      }
      .badge-error {
        @apply bg-app-errorBg text-app-error border-app-error/20;
      }
      .badge-warning {
        @apply bg-app-warningBg text-app-warning border-app-warning/20;
      }
      .badge-neutral {
        @apply bg-app-bg text-app-textMuted border-app-border;
      }
      .badge-primary {
        @apply bg-app-primary/10 text-app-primary border-app-primary/20;
      }
      .badge-info {
        @apply bg-blue-500/10 text-blue-400 border-blue-500/20;
      }
      
      /* Tabs */
      .tabs {
        @apply flex space-x-1 bg-app-bg p-1 rounded-lg border border-app-border overflow-x-auto;
      }
      .tab {
        @apply flex items-center px-3 py-1.5 text-sm font-medium rounded-md text-app-textMuted hover:text-app-textMain transition-colors whitespace-nowrap;
      }
      .tab-active {
        @apply bg-app-surface text-app-textMain shadow-sm border border-app-border;
      }
      
      /* HTMX Indicators */
      .htmx-indicator { display:none; }
      .htmx-request .htmx-indicator { display:inline-block; }
      .htmx-request.htmx-indicator { display:inline-block; }
      
      /* Scrollbar */
      ::-webkit-scrollbar { width: 8px; height: 8px; }
      ::-webkit-scrollbar-track { @apply bg-transparent; }
      ::-webkit-scrollbar-thumb { @apply bg-app-border rounded-full hover:bg-app-borderFocus; }
    }
  </style>
</head>
<body class="bg-app-bg text-app-textMain min-h-screen font-sans flex antialiased">
  
  {% if user %}
  <!-- Sidebar -->
  <aside class="w-64 flex-shrink-0 bg-app-surface border-r border-app-border flex flex-col hidden md:flex sticky top-0 h-screen">
    <div class="p-6">
      <div class="flex items-center gap-3 text-app-textMain font-bold text-lg tracking-wide">
        <i data-lucide="zap" class="w-6 h-6 text-app-primary"></i>
        <span>Parser Admin</span>
      </div>
    </div>
    
    <nav class="flex-1 px-4 space-y-1 overflow-y-auto">
      <a href="/raw" class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors {{ 'bg-app-primary/10 text-app-primary' if 'raw' in request.url.path else 'text-app-textMuted hover:bg-app-surfaceHover hover:text-app-textMain' }}">
        <i data-lucide="inbox" class="w-5 h-5"></i>
        Сырые посты
      </a>
      <a href="/editor" class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors {{ 'bg-app-primary/10 text-app-primary' if 'editor' in request.url.path else 'text-app-textMuted hover:bg-app-surfaceHover hover:text-app-textMain' }}">
        <i data-lucide="edit-3" class="w-5 h-5"></i>
        Редактор
      </a>
      <a href="/sources" class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors {{ 'bg-app-primary/10 text-app-primary' if 'sources' in request.url.path else 'text-app-textMuted hover:bg-app-surfaceHover hover:text-app-textMain' }}">
        <i data-lucide="database" class="w-5 h-5"></i>
        Источники
      </a>
      {% if user.role != "editor" %}
      <a href="/workers" class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors {{ 'bg-app-primary/10 text-app-primary' if 'workers' in request.url.path else 'text-app-textMuted hover:bg-app-surfaceHover hover:text-app-textMain' }}">
        <i data-lucide="cpu" class="w-5 h-5"></i>
        Воркеры
      </a>
      <a href="/users" class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors {{ 'bg-app-primary/10 text-app-primary' if 'users' in request.url.path else 'text-app-textMuted hover:bg-app-surfaceHover hover:text-app-textMain' }}">
        <i data-lucide="users" class="w-5 h-5"></i>
        Пользователи
      </a>
      <a href="/logs" class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors {{ 'bg-app-primary/10 text-app-primary' if 'logs' in request.url.path else 'text-app-textMuted hover:bg-app-surfaceHover hover:text-app-textMain' }}">
        <i data-lucide="file-text" class="w-5 h-5"></i>
        Логи
      </a>
      {% endif %}
    </nav>

    <div class="p-4 border-t border-app-border">
      <div class="flex items-center gap-3 px-3 py-2 mb-2">
        <div class="w-8 h-8 rounded-full bg-app-primary/20 flex items-center justify-center text-app-primary font-bold text-sm">
          {{ user.login[0]|upper }}
        </div>
        <div class="flex-1 min-w-0">
          <div class="text-sm font-medium text-app-textMain truncate">{{ user.login }}</div>
          <div class="text-xs text-app-textMuted truncate">{{ user.role }}</div>
        </div>
      </div>
      <form method="post" action="/logout" class="m-0">
        <input type="hidden" name="csrf_token" value="{{ user.csrf_token }}">
        <button type="submit" class="w-full flex items-center justify-center gap-2 px-3 py-2 rounded-lg text-sm font-medium text-app-error hover:bg-app-errorBg transition-colors">
          <i data-lucide="log-out" class="w-4 h-4"></i>
          Выйти
        </button>
      </form>
    </div>
  </aside>

  <!-- Mobile Topbar (Visible only on small screens) -->
  <div class="md:hidden fixed top-0 left-0 right-0 h-16 bg-app-surface border-b border-app-border z-50 flex items-center justify-between px-4">
    <div class="flex items-center gap-2 font-bold text-app-textMain">
      <i data-lucide="zap" class="w-5 h-5 text-app-primary"></i>
      Parser
    </div>
    <button class="btn btn-ghost btn-icon" onclick="document.getElementById('mobile-menu').classList.toggle('hidden')">
      <i data-lucide="menu" class="w-6 h-6"></i>
    </button>
  </div>

  <!-- Mobile Menu Dropdown -->
  <div id="mobile-menu" class="hidden md:hidden fixed top-16 left-0 right-0 bg-app-surface border-b border-app-border z-40 p-4 space-y-2 shadow-lg">
    <a href="/raw" class="block px-3 py-2 rounded-lg text-sm {{ 'bg-app-bg text-app-textMain' if 'raw' in request.url.path else 'text-app-textMuted' }}">Сырые посты</a>
    <a href="/editor" class="block px-3 py-2 rounded-lg text-sm {{ 'bg-app-bg text-app-textMain' if 'editor' in request.url.path else 'text-app-textMuted' }}">Редактор</a>
    <a href="/sources" class="block px-3 py-2 rounded-lg text-sm {{ 'bg-app-bg text-app-textMain' if 'sources' in request.url.path else 'text-app-textMuted' }}">Источники</a>
    {% if user.role != "editor" %}
    <a href="/workers" class="block px-3 py-2 rounded-lg text-sm {{ 'bg-app-bg text-app-textMain' if 'workers' in request.url.path else 'text-app-textMuted' }}">Воркеры</a>
    {% endif %}
    <div class="pt-2 mt-2 border-t border-app-border">
      <form method="post" action="/logout" class="m-0">
        <input type="hidden" name="csrf_token" value="{{ user.csrf_token }}">
        <button type="submit" class="w-full text-left px-3 py-2 rounded-lg text-sm text-app-error">Выйти</button>
      </form>
    </div>
  </div>
  {% endif %}

  <!-- Main Content Area -->
  <main class="flex-1 min-w-0 flex flex-col h-screen overflow-y-auto {% if user %}pt-16 md:pt-0{% endif %} relative">
    <div class="p-4 md:p-8 max-w-[1600px] w-full mx-auto">
      {% block body %}{% endblock %}
    </div>
  </main>

  <script>
    // Initialize Lucide icons
    lucide.createIcons();
    
    // Re-initialize icons after HTMX swap
    document.body.addEventListener('htmx:afterSwap', function() {
      lucide.createIcons();
    });

    document.body.addEventListener('htmx:responseError', function(evt) {
      alert("Ошибка при загрузке: " + evt.detail.xhr.status);
    });
  </script>
</body>
</html>
