{% from "_includes/forms" import text -%}

{% do view.registerTranslations('app', [
    "Sort by {attribute}",
    "Score",
    "Structure",
    "Display in a table",
    "Display hierarchically",
    "Display as thumbnails",
]) %}

{% set elementInstance = craft.app.elements.createElement(elementType) %}
{% set context = context is defined ? context : 'index' %}
{% set showStatusMenu = (showStatusMenu is defined and showStatusMenu != 'auto' ? showStatusMenu : elementInstance.hasStatuses()) %}
{% set showSiteMenu = (craft.app.getIsMultiSite() ? (showSiteMenu ?? 'auto') : false) %}
{% if showSiteMenu == 'auto' %}
    {% set showSiteMenu = elementInstance.isLocalized() %}
{% endif %}
{% set sortOptions = elementInstance.sortOptions() %}

<div class="main">
    <div class="toolbar">
        <table class="inputs fullwidth collapsible">
            <tr>
                {% if showStatusMenu %}
                    <td class="thin">
                        <div class="btn menubtn statusmenubtn"><span class="status"></span>{{ "All"|t('app') }}</div>
                        <div class="menu">
                            <ul class="padded">
                                <li><a data-status="" class="sel"><span class="status"></span>{{ "All"|t('app') }}</a></li>
                                {% for status, label in elementInstance.statuses() %}
                                    <li><a data-status="{{ status }}"><span class="status {{ status }}"></span>{{ label }}</a></li>
                                {% endfor %}
                            </ul>
                        </div>
                    </td>
                {% endif %}
                {% if showSiteMenu %}
                    {% set editableSites = craft.app.sites.getEditableSites() %}
                    {% if editableSites|length %}
                        {% if craft.app.sites.currentSite.id in craft.app.sites.getEditableSiteIds() %}
                            {% set initialSite = craft.app.sites.currentSite %}
                        {% else %}
                            {% set initialSite = editableSites|first %}
                        {% endif %}
                        <td class="thin">
                            <div class="btn menubtn sitemenubtn">{{ initialSite ? initialSite.name|t('site') }}</div>
                            <div class="menu">
                                <ul class="padded">
                                    {% for site in editableSites %}
                                        <li><a{% if initialSite and site.id == initialSite.id %} class="sel"{% endif %} data-site-id="{{ site.id }}">{{ site.name|t('site') }}</a></li>
                                    {% endfor %}
                                </ul>
                            </div>
                        </td>
                    {% endif %}
                {% endif %}
                <td>
                    <div class="texticon search icon clearable">
                        {{ text({
                            placeholder: "Search"|t('app')
                        }) }}
                        <div class="clear hidden" title="{{ 'Clear'|t('app') }}"></div>
                    </div>
                </td>
                <td class="thin">
                    <div class="btn menubtn sortmenubtn"{% if sortOptions %} title="{{ 'Sort by {attribute}'|t('app', { attribute: sortOptions|first }) }}"{% endif %} data-icon="asc">{{ sortOptions ? sortOptions|first }}</div>
                    <div class="menu">
                        <ul class="padded sort-attributes">
                            {% for key, label in sortOptions %}
                                <li><a{% if loop.first %} class="sel"{% endif %} data-attr="{{ key }}">{{ label }}</a></li>
                            {% endfor %}
                        </ul>
                        <hr>
                        <ul class="padded sort-directions">
                            <li><a data-dir="asc" class="sel">{{ "Ascending"|t('app') }}</a></li>
                            <li><a data-dir="desc">{{ "Descending"|t('app') }}</a></li>
                        </ul>
                    </div>
                </td>
                <td class="thin viewbtns hidden"></td>
            </tr>
        </table>
        <div class="spinner hidden"></div>
    </div>

    <div class="elements"></div>
</div>