{% load i18n daisy_theme %}

{% if result_hidden_fields %}
<div class="hiddenfields">
  {% for item in result_hidden_fields %}{{ item }}{% endfor %}
</div>
{% endif %}

{% if results %}
<div class="results overflow-x-auto w-full">
  <table id="result_list" class="table table-zebra table-hover w-full daisy-admin-table text-xs">
    <thead>
      <tr class="bg-base-200/80 border-b border-base-300">
        {% for header in result_headers %}
        <th scope="col" {{ header.class_attrib }} class="py-3 px-4 font-bold text-base-content/80">
          <div class="flex items-center gap-1.5">
            <div class="text">
              {% if header.sortable %}
                <a href="{{ header.url_primary }}" class="hover:text-primary transition-colors flex items-center gap-1">
                  <span>{{ header.text|capfirst }}</span>
                  {% if header.sortable and header.sort_priority > 0 %}
                    <span class="inline-flex text-primary">
                      {% if header.ascending %}
                        {% daisy_icon "chevron-up" "w-3 h-3" %}
                      {% else %}
                        {% daisy_icon "chevron-down" "w-3 h-3" %}
                      {% endif %}
                    </span>
                  {% endif %}
                </a>
              {% else %}
                <span>{{ header.text|capfirst }}</span>
              {% endif %}
            </div>

            {% if header.sortable and header.sort_priority > 0 %}
              <div class="sortoptions flex items-center gap-1 ms-1">
                {% if num_sorted_fields > 1 %}
                  <span class="badge badge-xs badge-neutral text-[9px]">{{ header.sort_priority }}</span>
                {% endif %}
                <a href="{{ header.url_remove }}" class="opacity-40 hover:opacity-100 text-error" title="{% translate 'Remove from sorting' %}">
                  {% daisy_icon "x" "w-2.5 h-2.5" %}
                </a>
              </div>
            {% endif %}
          </div>
        </th>
        {% endfor %}
      </tr>
    </thead>
    <tbody class="divide-y divide-base-200">
      {% for result in results %}
        {% if result.form and result.form.non_field_errors %}
          <tr class="bg-error/10">
            <td colspan="{{ result|length }}" class="p-2 text-error text-xs">
              {{ result.form.non_field_errors }}
            </td>
          </tr>
        {% endif %}
        <tr class="hover:bg-base-200/40 transition-colors">
          {% for item in result %}
            {{ item }}
          {% endfor %}
        </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endif %}