{% 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">
        <div class="flex">
            {% if showStatusMenu %}
                <div>
                    <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>
                </div>
            {% 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 %}
                    <div>
                        <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>
                    </div>
                {% endif %}
            {% endif %}
            <div class="flex-grow texticon search icon clearable">
                {{ text({
                    placeholder: "Search"|t('app')
                }) }}
                <div class="clear hidden" title="{{ 'Clear'|t('app') }}"></div>
            </div>
            <div>
                <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>
            </div>
            <div class="spinner invisible"></div>
        </div>
    </div>

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