{% extends '_layouts/cp.twig' %}

{% hook 'cp.layouts.elementindex' %}


{% block contextMenu %}
    {% if showSiteMenu %}
        {% include "_elements/sitemenu" %}
    {% endif %}
{% endblock %}


{% block sidebar %}
    {% if sources is not empty %}
        <nav aria-labelledby="source-heading">
            <h2 id="source-heading" class="visually-hidden">{{ 'Sources'|t('app') }}</h2>
            {% include "_elements/sources" %}
        </nav>

        <div id="source-actions" class="buttons"></div>
    {% endif %}
{% endblock %}


{% block toolbar %}
    {% include '_elements/toolbar' with {
        showSiteMenu: false,
    } %}
{% endblock %}


{% block content %}
    <div class="main element-index">
        <a class="skip-link btn" href="#footer">{{ 'Skip to footer'|t('app') }}</a>
        <div class="elements busy">
            <div class="update-spinner spinner spinner-absolute"></div>
        </div>
    </div>
{% endblock %}


{% block footer %}
    <div id="count-spinner" class="spinner small hidden"></div>
    <div id="count-container" class="light">&nbsp;</div>
    <div id="actions-container" class="flex"></div>
    <div id="export-container">
        <button type="button" id="export-btn" class="btn hidden" aria-expanded="false">{{ 'Export…'|t('app') }}</button>
    </div>
{% endblock %}


{% block initJs %}
    Craft.elementIndex = Craft.createElementIndex('{{ elementType|e("js") }}', $('#page-container'), {
        elementTypeName: '{{ elementDisplayName|e("js") }}',
        elementTypePluralName: '{{ elementPluralDisplayName|e("js") }}',
        context: '{{ context }}',
        storageKey: 'elementindex.{{ elementType|e("js") }}',
        criteria: Craft.defaultIndexCriteria,
        toolbarSelector: '#toolbar',
        defaultSource: {{ (defaultSource ?? null)|json_encode|raw }},
        defaultSourcePath: {{ (defaultSourcePath ?? null)|json_encode|raw }},
        canHaveDrafts: {{ (canHaveDrafts ?? false) ? 'true' : 'false' }},
    });
{% endblock %}

{% js block('initJs') %}