<div class="flex flex-col xl:flex-row gap-6">
  <!-- Sidebar Filters -->
  <aside class="w-full xl:w-72 flex-shrink-0">
    <div class="card p-4 sticky top-6">
      <form id="filter-form" hx-get="/raw" hx-target="#content-area" hx-push-url="true" hx-trigger="submit">
        <input type="hidden" name="sort" value="{{ sort }}">
        
        <div class="flex justify-between items-center mb-6">
          <h2 class="text-sm font-bold text-app-textMuted uppercase tracking-wider">Фильтры</h2>
          <a href="/raw" class="text-xs text-app-primary hover:text-app-primaryHover transition-colors" hx-boost="true" hx-target="#content-area">Сбросить</a>
        </div>

        <div class="space-y-6">
          <!-- Score -->
          <div>
            <label class="block text-xs font-semibold text-app-textMain mb-2">Оценка AI</label>
            <div class="flex gap-2">
              <input type="number" name="score_min" placeholder="От" value="{{ score_min }}" class="input w-full" />
              <input type="number" name="score_max" placeholder="До" value="{{ score_max }}" class="input w-full" />
            </div>
          </div>

          <!-- Dates -->
          <div>
            <label class="block text-xs font-semibold text-app-textMain mb-2">Дата поста</label>
            <div class="space-y-2">
              <input type="date" name="date_from" value="{{ date_from }}" class="input w-full" />
              <input type="date" name="date_to" value="{{ date_to }}" class="input w-full" />
            </div>
          </div>

          <!-- Qualification Status -->
          <div>
            <label class="block text-xs font-semibold text-app-textMain mb-2">Квалификация</label>
            <div class="bg-app-bg border border-app-border rounded-lg p-2 max-h-48 overflow-y-auto space-y-1 custom-scrollbar">
              {% for item in facets.qualification_statuses %}
              <label class="flex items-center gap-2 px-2 py-1 hover:bg-app-surfaceHover rounded cursor-pointer transition-colors group">
                <input type="checkbox" name="qualification_status" value="{{ item.value }}" class="checkbox" {% if item.value in qualification_statuses %}checked{% endif %} />
                <span class="text-sm text-app-textMain flex-1 group-hover:text-white">{{ item.value }}</span>
                <span class="badge badge-neutral bg-transparent border-none">{{ item.count }}</span>
              </label>
              {% endfor %}
            </div>
          </div>

          <!-- Rewrite Status -->
          <div>
            <label class="block text-xs font-semibold text-app-textMain mb-2">Рерайт</label>
            <div class="bg-app-bg border border-app-border rounded-lg p-2 max-h-48 overflow-y-auto space-y-1 custom-scrollbar">
              {% for item in facets.rewrite_statuses %}
              <label class="flex items-center gap-2 px-2 py-1 hover:bg-app-surfaceHover rounded cursor-pointer transition-colors group">
                <input type="checkbox" name="rewrite_status" value="{{ item.value }}" class="checkbox" {% if item.value in rewrite_statuses %}checked{% endif %} />
                <span class="text-sm text-app-textMain flex-1 group-hover:text-white">{{ item.value }}</span>
                <span class="badge badge-neutral bg-transparent border-none">{{ item.count }}</span>
              </label>
              {% endfor %}
            </div>
          </div>
          
          <!-- Source -->
          <div>
            <label class="block text-xs font-semibold text-app-textMain mb-2">Источник</label>
            <div class="bg-app-bg border border-app-border rounded-lg p-2 max-h-48 overflow-y-auto space-y-1 custom-scrollbar">
              {% for item in facets.sources %}
              <label class="flex items-center gap-2 px-2 py-1 hover:bg-app-surfaceHover rounded cursor-pointer transition-colors group">
                <input type="checkbox" name="source_id" value="{{ item.id }}" class="checkbox" {% if item.id in source_ids %}checked{% endif %} />
                <span class="text-xs text-app-textMain flex-1 truncate group-hover:text-white" title="{{ item.name }}">{{ item.name }}</span>
                <span class="badge badge-neutral bg-transparent border-none text-[10px]">{{ item.count }}</span>
              </label>
              {% endfor %}
            </div>
          </div>

          <button class="btn btn-primary w-full" type="submit">Применить фильтры</button>
        </div>
      </form>
    </div>
  </aside>

  <!-- Main Content (Table) -->
  <div class="flex-1 min-w-0 flex flex-col gap-6">
    <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 bg-app-surface border border-app-border p-3 rounded-xl shadow-sm">
      <div class="text-sm text-app-textMuted flex items-center gap-2">
        <i data-lucide="layers" class="w-4 h-4"></i>
        Всего: <span class="font-bold text-white">{{ pagination.total }}</span>
      </div>
      <div class="flex items-center gap-2">
        <span class="text-sm text-app-textMuted">На странице:</span>
        <select name="per_page" class="select select-sm w-auto py-1 pr-8" form="filter-form" onchange="document.getElementById('filter-form').dispatchEvent(new Event('submit', {cancelable: true}))">
          {% for n in [25,50,100,200] %}
          <option value="{{ n }}" {% if pagination.per_page == n %}selected{% endif %}>{{ n }}</option>
          {% endfor %}
        </select>
      </div>
    </div>

    <div class="card overflow-hidden">
      <div class="overflow-x-auto">
        <table class="w-full text-left text-sm whitespace-nowrap">
          <thead class="bg-app-bg border-b border-app-border">
            <tr class="text-app-textMuted font-semibold tracking-wide uppercase text-xs">
              <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 min-w-[300px] w-full">Пост</th>
              <th class="px-4 py-3 text-center">AI Оценка</th>
            </tr>
          </thead>
          <tbody class="divide-y divide-app-border">
            {% for p in posts %}
            <tr class="hover:bg-app-surfaceHover transition-colors group">
              <td class="px-4 py-3 font-mono text-xs">
                <a href="/raw/{{ p.id }}" class="text-app-primary hover:text-white transition-colors">#{{ p.id }}</a>
              </td>
              <td class="px-4 py-3 whitespace-normal min-w-[200px]">
                <a href="{{ p.original_url }}" target="_blank" class="font-semibold text-app-textMain hover:text-app-primary transition-colors">{{ p.source_name }}</a>
                <div class="flex items-center gap-2 mt-1">
                  <span class="text-[10px] text-app-textMuted font-mono bg-app-bg px-1 rounded">{{ p.source_platform }}</span>
                  <span class="text-[10px] text-blue-400 font-mono">#{{ p.source_tag or "—" }}</span>
                </div>
              </td>
              <td class="px-4 py-3">
                <div class="flex flex-col items-start gap-1">
                  <span class="badge badge-neutral text-[9px] uppercase tracking-wider">{{ p.status }}</span>
                  {% if p.qualification_status %}
                    <span class="badge badge-success text-[9px] uppercase tracking-wider bg-app-success/10 text-app-success border-app-success/20">Квалиф: {{ p.qualification_status }}</span>
                  {% endif %}
                  {% if p.rewrite_status %}
                    <span class="badge badge-warning text-[9px] uppercase tracking-wider bg-app-warning/10 text-app-warning border-app-warning/20">Рерайт: {{ p.rewrite_status }}</span>
                  {% endif %}
                </div>
                {% if p.error %}
                  <div class="text-[10px] text-app-error mt-1 max-w-[200px] whitespace-normal leading-tight">{{ p.error }}</div>
                {% endif %}
              </td>
              <td class="px-4 py-3 whitespace-normal w-full max-w-sm lg:max-w-xl xl:max-w-2xl">
                <div class="text-xs text-app-textMain/80 leading-relaxed font-sans line-clamp-3">
                  {{ p.raw_text }}
                </div>
                {% if p.posted_at_fmt %}
                  <div class="text-[10px] text-app-textMuted mt-1">Опубликован: {{ p.posted_at_fmt }}</div>
                {% else %}
                  <div class="text-[10px] text-app-textMuted mt-1">Создан: {{ p.created_at_fmt }}</div>
                {% endif %}
              </td>
              <td class="px-4 py-3 text-center">
                {% if p.qualification_score is not none %}
                  <div class="font-mono font-bold text-lg {% if p.qualification_score >= 8 %}text-app-success{% elif p.qualification_score >= 5 %}text-app-warning{% else %}text-app-error{% endif %}">{{ p.qualification_score }}</div>
                {% else %}
                  <span class="text-app-textMuted">—</span>
                {% endif %}
              </td>
            </tr>
            {% else %}
            <tr>
              <td colspan="5" class="px-4 py-12">
                <div class="flex flex-col items-center justify-center text-app-textMuted">
                  <i data-lucide="inbox" class="w-12 h-12 mb-3 text-app-borderFocus"></i>
                  <p class="text-sm">Нет данных по заданным фильтрам</p>
                </div>
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>

    <!-- Pagination -->
    {% if pagination.pages > 1 %}
    <div class="flex justify-center mt-4">
      <div class="tabs p-1">
        <button hx-get="?page=1" hx-include="#filter-form" hx-target="#content-area" class="btn btn-sm btn-ghost w-10 h-10 p-0 rounded-md" {% if pagination.page == 1 %}disabled{% endif %}><i data-lucide="chevrons-left" class="w-4 h-4"></i></button>
        <button hx-get="?page={{ pagination.page - 1 }}" hx-include="#filter-form" hx-target="#content-area" class="btn btn-sm btn-ghost w-10 h-10 p-0 rounded-md" {% if pagination.page == 1 %}disabled{% endif %}><i data-lucide="chevron-left" class="w-4 h-4"></i></button>
        
        <span class="flex items-center justify-center px-4 text-sm font-medium text-app-textMuted bg-app-bg rounded-md border border-app-border mx-1">
          {{ pagination.page }} из {{ pagination.pages }}
        </span>
        
        <button hx-get="?page={{ pagination.page + 1 }}" hx-include="#filter-form" hx-target="#content-area" class="btn btn-sm btn-ghost w-10 h-10 p-0 rounded-md" {% if pagination.page >= pagination.pages %}disabled{% endif %}><i data-lucide="chevron-right" class="w-4 h-4"></i></button>
        <button hx-get="?page={{ pagination.pages }}" hx-include="#filter-form" hx-target="#content-area" class="btn btn-sm btn-ghost w-10 h-10 p-0 rounded-md" {% if pagination.page >= pagination.pages %}disabled{% endif %}><i data-lucide="chevrons-right" class="w-4 h-4"></i></button>
      </div>
    </div>
    {% endif %}
  </div>
</div>
