{% extends "base.html" %}
{% block body %}
<div class="mb-8">
  <h1 class="text-3xl font-bold tracking-tight text-white flex items-center gap-3 mb-2">
    <i data-lucide="database" class="text-app-primary w-8 h-8"></i>
    Источники
  </h1>
  <div class="text-app-textMuted text-sm">VK-источники для парсинга. Название идёт в prompt, тэг — в будущие хэштеги.</div>
</div>

<details class="card mb-8 group/details" {% if source_preview %}open{% endif %}>
  <summary class="p-4 flex items-center justify-between cursor-pointer select-none hover:bg-app-surfaceHover transition-colors list-none">
    <div class="flex items-center gap-3">
      <div class="w-8 h-8 rounded-lg bg-app-primary/20 text-app-primary flex items-center justify-center">
        <i data-lucide="plus" class="w-5 h-5"></i>
      </div>
      <span class="text-lg font-bold text-white">Добавить источники</span>
    </div>
    <i data-lucide="chevron-down" class="w-5 h-5 text-app-textMuted transition-transform group-open/details:rotate-180"></i>
  </summary>
  
  <div class="p-6 border-t border-app-border bg-app-bg/30">
    <div class="max-w-2xl">
      <form method="post" action="/sources/preview" class="flex flex-col gap-4">
        <input type="hidden" name="csrf_token" value="{{ user.csrf_token }}">
        <input type="hidden" name="q" value="{{ q }}">
        <input type="hidden" name="status_filter" value="{{ status_filter }}">
        <input type="hidden" name="active_filter" value="{{ active_filter }}">
        <input type="hidden" name="per_page" value="{{ pagination.per_page }}">
        
        <div>
          <label class="block text-xs font-bold text-app-textMuted mb-1 flex justify-between">
            <span>Список (Название Тэг Ссылка)</span>
            <span class="text-[10px] text-app-textMuted/60 font-normal">По 1 на строку</span>
          </label>
          <textarea name="bulk_text" class="textarea font-mono text-xs h-40 leading-relaxed" placeholder="Academy Gear academy_gear https://vk.com/academy_gear&#10;A2 Technologies a2technologies https://vk.com/a2technologies">{{ bulk_text }}</textarea>
        </div>
        
        <label class="flex items-center gap-3 mt-2 cursor-pointer group">
          <input name="bulk_active" type="checkbox" class="checkbox" {% if bulk_active %}checked{% endif %}>
          <span class="text-sm font-medium text-app-textMain group-hover:text-white transition-colors">Включить после добавления</span>
        </label>
        
        <button class="btn btn-surface mt-2 self-start" type="submit">
          <i data-lucide="search" class="w-4 h-4"></i> Проверить список
        </button>
      </form>
    </div>

    {% if source_preview %}
    <div class="mt-8 pt-6 border-t border-app-border">
      <h3 class="font-bold text-white mb-4 flex items-center gap-2"><i data-lucide="eye" class="w-4 h-4 text-app-primary"></i> Результаты проверки</h3>
      
      <div class="overflow-x-auto bg-app-bg border border-app-border rounded-xl">
        <table class="w-full text-left text-sm whitespace-nowrap">
          <thead class="border-b border-app-border bg-app-surface">
            <tr class="text-app-textMuted font-semibold tracking-wide uppercase text-[10px]">
              <th class="px-4 py-3"># Стр.</th>
              <th class="px-4 py-3">Название</th>
              <th class="px-4 py-3">Тэг</th>
              <th class="px-4 py-3">Ссылка</th>
              <th class="px-4 py-3">VK ID</th>
              <th class="px-4 py-3">Статус</th>
            </tr>
          </thead>
          <tbody class="divide-y divide-app-border text-xs">
            {% for item in source_preview %}
            <tr class="hover:bg-app-surfaceHover transition-colors">
              <td class="px-4 py-3 text-app-textMuted font-mono">{{ item.line_no }}</td>
              <td class="px-4 py-3 font-semibold text-app-textMain">{{ item.name or "—" }}</td>
              <td class="px-4 py-3 font-mono text-blue-400">#{{ item.tag or "—" }}</td>
              <td class="px-4 py-3"><a href="{{ item.url }}" target="_blank" class="text-app-textMuted hover:text-white hover:underline">{{ item.url }}</a></td>
              <td class="px-4 py-3 font-mono text-app-textMuted text-[10px]">
                {{ item.external_id }}<br>
                {{ item.external_owner_id or "" }}
              </td>
              <td class="px-4 py-3">
                {% if item.ok %}
                <span class="badge badge-success">Готов</span>
                {% else %}
                <span class="badge badge-error" title="{{ item.error }}">Ошибка</span>
                {% endif %}
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
      
      <form method="post" action="/sources/bulk" class="mt-6 flex flex-col sm:flex-row items-center gap-4 bg-app-warningBg border border-app-warning/20 p-4 rounded-xl">
        <input type="hidden" name="csrf_token" value="{{ user.csrf_token }}">
        <input type="hidden" name="bulk_payload" value='{{ source_preview|tojson }}'>
        <button class="btn btn-primary" type="submit">
          <i data-lucide="check-circle" class="w-4 h-4"></i> Добавить прошедшие проверку
        </button>
        <div class="text-sm text-app-warning flex items-center gap-2">
          <i data-lucide="info" class="w-4 h-4"></i>
          <span>Строки с ошибками и дубликаты будут автоматически пропущены.</span>
        </div>
      </form>
    </div>
    {% endif %}
  </div>
</details>

<div class="card mb-6">
  <div class="p-4 border-b border-app-border bg-app-bg/50">
    <form id="filter-form" class="flex flex-wrap gap-4 items-end" hx-get="/sources" hx-target="#content-area" hx-push-url="true">
      <div class="w-full sm:flex-1 min-w-[250px]">
        <label class="block text-xs font-bold text-app-textMuted mb-1">Поиск</label>
        <div class="relative">
          <i data-lucide="search" class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-app-textMuted"></i>
          <input name="q" value="{{ q }}" placeholder="Название, ссылка, id" class="input w-full pl-9">
        </div>
      </div>
      
      <div class="w-full sm:w-48">
        <label class="block text-xs font-bold text-app-textMuted mb-1">Состояние</label>
        <select name="active_filter" class="select w-full">
          <option value="">Все состояния</option>
          <option value="on" {% if active_filter == "on" %}selected{% endif %}>Включен (ON)</option>
          <option value="off" {% if active_filter == "off" %}selected{% endif %}>Выключен (OFF)</option>
        </select>
      </div>

      <div class="w-full sm:w-48">
        <label class="block text-xs font-bold text-app-textMuted mb-1">Статус Парсера</label>
        <select name="status_filter" class="select w-full">
          <option value="">Все статусы</option>
          {% for st in ["new","ok","paused","error"] %}
          <option value="{{ st }}" {% if status_filter == st %}selected{% endif %}>{{ st }}</option>
          {% endfor %}
        </select>
      </div>
      
      <div class="w-full sm:w-auto">
        <button class="btn btn-surface w-full sm:w-auto" type="submit">Найти</button>
      </div>
    </form>
  </div>
  
  <div id="content-area">
    {% include "sources_content.html" %}
  </div>
</div>
{% endblock %}