{% 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 %}
                {% include "_elements/sitemenu" %}
            {% 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>