{% 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() %}

{% macro sortOptionLabel(sortOption) %}
    {{ sortOption.label ?? sortOption  }}
{% endmacro %}
{% from _self import sortOptionLabel %}

<div class="main">
    <div class="toolbar">
        <div class="flex">
            {% if showStatusMenu or context == 'index' %}
                <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>
                            {% if showStatusMenu %}
                                {% for status, info in elementInstance.statuses() %}
                                    {% set label = info.label ?? info %}
                                    {% set color = info.color ?? '' %}
                                    <li><a data-status="{{ status }}"><span class="status {{ status }} {{ color }}"></span>{{ label }}</a></li>
                                {% endfor %}
                            {% endif %}
                        </ul>
                        {% if context == 'index' %}
                            {% if showStatusMenu %}<hr class="padded">{% endif %}
                            <ul class="padded">
                                {% set draftsExist = elementInstance.find().draftOf(false).anyStatus().exists() %}
                                {% if draftsExist %}
                                    <li><a data-drafts><span class="icon" data-icon="draft"></span>{{ 'Drafts'|t('app') }}</a></li>
                                {% endif %}
                                <li><a data-trashed><span class="icon" data-icon="trash"></span>{{ "Trashed"|t('app') }}</a></li>
                            </ul>
                      {% endif %}
                    </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: sortOptionLabel(sortOptions|first) }) }}"{% endif %} data-icon="asc">{{ sortOptions ? sortOptionLabel(sortOptions|first) }}</div>
                <div class="menu">
                    <ul class="padded sort-attributes">
                        {% for key, sortOption in sortOptions %}
                            <li><a{% if loop.first %} class="sel"{% endif %} data-attr="{{ sortOption.attribute ?? sortOption.orderBy ?? key }}">{{ sortOptionLabel(sortOption) }}</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>