<div class="collapse collapse-arrow bg-base-200 border border-base-300 rounded-lg mt-4" {% if table_filters|selectattr("field")|list or table_sorts|selectattr("field")|list %}open{% endif %}>
  <input type="checkbox" {% if table_filters|selectattr("field")|list or table_sorts|selectattr("field")|list %}checked{% endif %} /> 
  <div class="collapse-title text-sm font-medium">Расширенные фильтры и сортировка</div>
  <div class="collapse-content border-t border-base-300 pt-4 flex flex-col lg:flex-row gap-6">
    <div class="flex-1">
      <div class="font-bold text-xs uppercase tracking-widest text-base-content/60 mb-2">Фильтры</div>
      <div class="flex flex-col gap-2">
        {% for item in table_filters %}
        <div class="flex flex-col sm:flex-row gap-2">
          <select name="f_field" class="select select-bordered select-sm w-full sm:w-1/3">
            <option value="">Поле</option>
            {% for field in field_options %}
            <option value="{{ field.value }}" {% if item.field == field.value %}selected{% endif %}>{{ field.label }}</option>
            {% endfor %}
          </select>
          <select name="f_op" class="select select-bordered select-sm w-full sm:w-1/4">
            {% for op in filter_op_options %}
            <option value="{{ op.value }}" {% if item.op == op.value %}selected{% endif %}>{{ op.label }}</option>
            {% endfor %}
          </select>
          <input name="f_value" value="{{ item.value }}" placeholder="Значение" class="input input-bordered input-sm w-full sm:w-auto flex-1">
        </div>
        {% endfor %}
      </div>
      <div class="text-xs text-base-content/50 mt-2">Пустые строки игнорируются. Для дат используй YYYY-MM-DD, для булевых значений — true/false.</div>
    </div>
    
    <div class="flex-1">
      <div class="font-bold text-xs uppercase tracking-widest text-base-content/60 mb-2">Сортировка</div>
      <div class="flex flex-col gap-2">
        {% for item in table_sorts %}
        <div class="flex flex-col sm:flex-row gap-2">
          <select name="sort_field" class="select select-bordered select-sm w-full sm:w-1/2">
            <option value="">Поле</option>
            {% for field in field_options %}
            <option value="{{ field.value }}" {% if item.field == field.value %}selected{% endif %}>{{ field.label }}</option>
            {% endfor %}
          </select>
          <select name="sort_dir" class="select select-bordered select-sm w-full sm:w-1/2">
            <option value="desc" {% if item.dir == "desc" %}selected{% endif %}>По убыванию</option>
            <option value="asc" {% if item.dir == "asc" %}selected{% endif %}>По возрастанию</option>
          </select>
        </div>
        {% endfor %}
      </div>
      <div class="text-xs text-base-content/50 mt-2">Сортировки применяются сверху вниз. Заменяют базовую сортировку страницы.</div>
    </div>
  </div>
</div>
