<!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
{% block sw_extension_my_extensions_listing_controls %}
<div class="sw-extension-my-extensions-listing-controls">
    <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
    {% block sw_extension_my_extensions_listing_controls_active_switch %}
    <sw-switch-field
        v-model:value="filterByActiveState"
        class="sw-extension-my-extensions-listing-controls__active-filter-switch"
        :label="$tc('sw-extension.my-extensions.listing.controls.labelActiveStateSwitch')"
    />
    {% endblock %}

    <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
    {% block sw_extension_my_extensions_listing_controls_sorting_select %}
    <sw-select-field
        v-model:value="selectedSortingOption"
        class="sw-extension-my-extensions-listing-controls__sorting-dropdown"
        size="small"
    >
        <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
        {% block sw_extension_my_extensions_listing_controls_sorting_select_option %}
        <option
            v-for="(sortingOption, index) in sortingOptions"
            :key="`sorting-option-${index}`"
            :value="sortingOption.value"
        >
            {{ sortingOption.name }}
        </option>
        {% endblock %}
    </sw-select-field>
    {% endblock %}
</div>
{% endblock %}
