{% apply spaceless %}

{% set structure = structure is defined ? structure : null -%}
{% set structureEditable = structureEditable is defined ? structureEditable : false -%}

{% if structure -%}
    {% set basePadding = (showCheckboxes ? 14 : 24) + (structureEditable ? 34 : 0) %}
    {% set padding = craft.app.locale.getOrientation() == 'ltr' ? 'left' : 'right' -%}
{% endif -%}
{% for element in elements %}
    {% set totalDescendants = structure
        ? (clone(elementQuery)
            .structureId(element.structureId)
            .descendantOf(element)
            .siteId(element.siteId)
            .status(null)
            .drafts(null)
            .draftOf(false)
            .savedDraftsOnly()
            .withCustomFields(false)
            .count() ?? 0)
        : 0 %}
    {% set elementTitle = element.title ?: element.id %}
    {% tag 'tr' with {
        data: {
            id: element.id,
            title: elementTitle,
            level: structure ? element.level : false,
            descendants: structure ? totalDescendants : false,
        },
        class: {
            disabled: element.id in disabledElementIds,
        }|filter|keys,
    } %}
        {% if showCheckboxes %}
            <td class="checkbox-cell">
                {{ tag('div', {
                    class: 'checkbox',
                    title: 'Select'|t('app'),
                    role: 'checkbox',
                    aria: {
                        label: 'Select'|t('app'),
                        checked: 'false',
                    },
                }) }}
            </td>
        {% endif %}
        {% for attribute in attributes %}
            {% if loop.first %}
                <th data-title="{{ attribute[1].label }}"{% if structure %} style="padding-{{ padding }}: {{ basePadding * element.level }}px;"{% endif %} data-titlecell="" scope="row">
                    {%- if structureEditable %}<a class="move icon" title="{{ 'Reorder'|t('app') }}" aria-label="{{ 'Reorder'|t('app') }}" role="button">&nbsp;</a>{% endif %}
                    {%- if structure and totalDescendants %}
                        {% set toggleLabel = 'Show {title} children'|t('app', {title: elementTitle}) %}
                        <button type="button" class="toggle{% if element.id not in collapsedElementIds %} expanded{% endif
                        %}" title="{{ 'Show/hide children'|t('app') }}" aria-label="{{ toggleLabel }}"
                        aria-expanded="{{  element.id not in collapsedElementIds ? 'true' : 'false' }}"></button>
                    {% endif %}
                    {%- include '_elements/element' with {
                        autoReload: false,
                    } -%}

                    {%- if structure %}
                        {% set textAlternative = 'Level {num}'|t('app', {
                            num: element.level,
                        }) %}
                        {{ tag('span', {
                            class: 'visually-hidden',
                            data: {
                                'text-alternative': true,
                            },
                            text: textAlternative,
                        }) }}
                    {% endif  %}
                </th>
            {% else %}
                <td data-title="{{ attribute[1].label }}" data-attr="{{ attribute[0] }}">
                    {{- element.getTableAttributeHtml(attribute[0])|raw -}}
                </td>
            {% endif %}
        {% endfor %}
    {% endtag %}
{% endfor %}

{% endapply -%}