{# WeTransfer-style sort control for transfer tables #}
<div class="transfer-sort" data-transfer-sort>
    <button type="button"
            class="transfer-sort__trigger"
            data-transfer-sort-trigger
            aria-haspopup="listbox"
            aria-expanded="false">
        <span class="transfer-sort__label">{{ 'lang.sortBy'|trans }}:</span>
        <span class="transfer-sort__value" data-transfer-sort-label>{{ 'lang.date'|trans }}</span>
        <span class="transfer-sort__dir" data-transfer-sort-dir aria-hidden="true">↓</span>
    </button>
    <ul class="transfer-sort__menu d-none" data-transfer-sort-menu role="listbox">
        <li>
            <button type="button" class="transfer-sort__option is-active" data-sort-key="date" data-sort-col="1">
                {{ 'lang.date'|trans }}
            </button>
        </li>
        <li>
            <button type="button" class="transfer-sort__option" data-sort-key="size" data-sort-col="2">
                {{ 'lang.size'|trans }}
            </button>
        </li>
        <li>
            <button type="button" class="transfer-sort__option" data-sort-key="title" data-sort-col="3">
                {{ 'lang.title'|trans }}
            </button>
        </li>
        <li>
            <button type="button" class="transfer-sort__option" data-sort-key="expiry" data-sort-col="4">
                {{ 'lang.validUntil'|trans }}
            </button>
        </li>
    </ul>
</div>