<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="/editor" hx-target="#content-area" hx-push-url="true" hx-trigger="submit">
        <input type="hidden" name="editorial_status" value="{{ status_filter }}">

        <div class="flex justify-between items-center mb-6">
          <h2 class="text-sm font-bold text-app-textMuted uppercase tracking-wider">Фильтры</h2>
          <a href="/editor" 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">
          <!-- Sort -->
          <div>
            <label class="block text-xs font-semibold text-app-textMain mb-2">Сортировка</label>
            <select name="sort" class="select w-full">
              <option value="rewritten_desc" {% if sort == "rewritten_desc" %}selected{% endif %}>рерайт: новые</option>
              <option value="rewritten_asc" {% if sort == "rewritten_asc" %}selected{% endif %}>рерайт: старые</option>
              <option value="posted_desc" {% if sort == "posted_desc" %}selected{% endif %}>VK: новые</option>
              <option value="posted_asc" {% if sort == "posted_asc" %}selected{% endif %}>VK: старые</option>
              <option value="score_desc" {% if sort == "score_desc" %}selected{% endif %}>оценка: выше</option>
              <option value="score_asc" {% if sort == "score_asc" %}selected{% endif %}>оценка: ниже</option>
            </select>
          </div>

          <!-- 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">Дата поста VK</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>

          <!-- 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">
              {% 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-sm 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">{{ item.count }}</span>
              </label>
              {% endfor %}
            </div>
          </div>

          <!-- Category -->
          <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">
              {% for item in facets.categories %}
              <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="category" value="{{ item.value }}" class="checkbox" {% if item.value in categories_selected %}checked{% endif %} />
                <span class="text-sm text-app-textMain flex-1 truncate group-hover:text-white" title="{{ item.value or 'Без категории' }}">{{ item.value or "Без категории" }}</span>
                <span class="badge badge-neutral bg-transparent border-none">{{ item.count }}</span>
              </label>
              {% endfor %}
            </div>
          </div>

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

  <!-- Main Content (List) -->
  <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">
          {% for n in [10,25,50,100] %}
          <option value="{{ n }}" {% if pagination.per_page == n %}selected{% endif %}>{{ n }}</option>
          {% endfor %}
        </select>
      </div>
    </div>

    <div class="flex flex-col gap-6">
      {% for p in posts %}
        {% include "editor_post.html" %}
      {% else %}
      <div class="card p-12 flex flex-col items-center justify-center text-center">
        <i data-lucide="inbox" class="w-16 h-16 text-app-borderFocus mb-4"></i>
        <h3 class="text-lg font-bold text-white mb-1">Ничего не найдено</h3>
        <p class="text-app-textMuted text-sm">В этой очереди пока нет постов, подходящих под фильтры.</p>
      </div>
      {% endfor %}
    </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>
