{% load admin_urls i18n %}

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

{% if results %}
    <div class="-mx-1 px-1 overflow-x-auto lg:border lg:border-base-200 lg:mx-0 lg:px-0 lg:rounded lg:shadow-sm lg:dark:border-base-800 {% if cl.model_admin.list_horizontal_scrollbar_top %}simplebar-horizontal-scrollbar-top{% endif %}" data-simplebar data-simplebar-auto-hide="false">
        <table id="result_list" class="block border-base-200 border-spacing-none border-separate w-full lg:table">
            <thead>
                <tr>
                    {% for header in result_headers %}
                        <th class="align-middle font-semibold py-2 text-left text-font-important-light dark:text-font-important-dark whitespace-nowrap {{ header.class_attrib }} {% if "action-toggle" in header.text and forloop.counter == 1 %}lg:px-3 lg:w-10{% else %}hidden px-3 lg:table-cell{% endif %}" scope="col">
                            <div class="flex items-center">
                                <div class="text">
                                    {% if header.sortable %}
                                        <a href="{{ header.url_primary }}">
                                            {{ header.text|capfirst }}
                                        </a>
                                    {% else %}
                                        {% if "action-toggle" in header.text and forloop.counter == 1 %}
                                            <label class="flex flex-row items-center gap-2">
                                                {{ header.text|capfirst }}

                                                <span class="block font-normal lg:hidden">
                                                    {% trans "Select all rows"%}
                                                </span>
                                            </label>
                                        {% else %}
                                            <span>
                                                {{ header.text|capfirst }}
                                            </span>
                                        {% endif %}
                                    {% endif %}
                                </div>

                                {% if header.sortable %}
                                    {% if header.sort_priority > 0 %}
                                        <div class="sortoptions flex items-center ml-2">
                                            <a href="{{ header.url_toggle }}" class="flex items-center leading-none text-base-400 hover:text-base-500 dark:text-base-500 dark:hover:text-base-400 toggle {% if header.ascending %}ascending{% else %}descending{% endif %}" title="{% translate "Toggle sorting" %}">
                                                {% if header.ascending %}
                                                    <span class="block material-symbols-outlined">arrow_circle_down</span>
                                                {% else %}
                                                    <span class="block material-symbols-outlined">arrow_circle_up</span>
                                                {% endif %}
                                            </a>

                                            <a class="sortremove flex items-center leading-none ml-1 text-base-400 dark:text-base-500 transition-all hover:text-red-700 dark:hover:text-red-500" href="{{ header.url_remove }}" title="{% translate "Remove from sorting" %}">
                                                <span class="block material-symbols-outlined">cancel</span>
                                            </a>
                                        </div>

                                        {% if num_sorted_fields > 1 %}
                                            <span class="sortpriority font-medium ml-2 text-xs" title="{% blocktranslate with priority_number=header.sort_priority %}Sorting priority: {{ priority_number }}{% endblocktranslate %}">
                                                {{ header.sort_priority }}
                                            </span>
                                        {% endif %}
                                    {% endif %}
                                {% endif %}
                            </div>
                        </th>
                    {% endfor %}
                </tr>
            </thead>

            <tbody class="block lg:table-row-group">
                {% for result in results %}
                    {% if result.form and result.form.non_field_errors %}
                        <tr>
                            <td class="text-left" colspan="{{ result|length }}">
                                {{ result.form.non_field_errors }}
                            </td>
                        </tr>
                    {% endif %}

                    <tr class="{% cycle '' 'bg-base-50 dark:bg-white/[.02]' %} block border mb-3 rounded shadow-sm lg:table-row lg:border-none lg:mb-0 lg:shadow-none dark:border-base-800">
                        {% for item in result %}
                            {{ item }}
                        {% endfor %}
                        {% include 'unfold/helpers/actions_row.html' with actions=actions_row instance_pk=result.instance_pk %}
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
{% else %}
    {% url cl.opts|admin_urlname:"add" as add_url %}
    {% blocktranslate with name=cl.opts.verbose_name asvar title %}Add {{ name }}{% endblocktranslate %}

    <div class="border border-base-200 flex flex-col items-center px-8 py-24 rounded shadow-sm dark:border-base-800">
        <div class="bg-base-100 flex h-24 items-center justify-center mb-8 rounded-full w-24 dark:bg-base-800">
            <span class="material-symbols-outlined text-base-500 !text-5xl dark:text-base-400">inbox</span>
        </div>

        <h2 class="font-semibold mb-1 text-xl text-font-important-light dark:text-font-important-dark">
            {% trans "No results found" %}
        </h2>

        <p class="mb-6 text-center">
            {% trans "This page yielded into no results. Create a new item or reset your filters." %}
        </p>

        {% if has_add_permission or cl.has_filters %}
            <div class="flex flex-col gap-4 justify-center w-full lg:flex-row">
                {% if has_add_permission %}
                    <a href="{% add_preserved_filters add_url is_popup to_field %}" class="bg-primary-600 flex flex-row font-medium gap-2 items-center h-9.5 justify-center px-3 py-2 rounded text-white w-full lg:w-auto">
                        <span class="material-symbols-outlined text-white">add</span> {{ title }}
                    </a>
                {% endif %}


                {% if cl.has_filters %}
                    <a href="{{ cl.clear_all_filters_qs }}" class="border border-base-200 flex flex-row font-medium gap-2 group/button h-9.5 items-center justify-center px-3 py-2 rounded transition-all w-full hover:text-primary-600 lg:w-auto dark:border-base-700 dark:hover:bg-base-900 dark:hover:text-primary-500">
                        <span class="material-symbols-outlined group-hover/button:text-primary-600 dark:group-hover/button:text-base-500 text-base-400 dark:text-base-500">filter_list_off</span> {% trans "Reset filters" %}
                    </a>
                {% endif %}
            </div>
        {% endif %}
    </div>
{% endif %}
