<!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
{% block sw_settings_snippet_set_list %}
<sw-page class="sw-settings-snippet-set-list">
    <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
    {% block sw_settings_snippet_set_list_search_bar %}
    <template #search-bar>
        <sw-search-bar
            :initial-search-type="$tc('sw-settings-snippet.general.searchBarTitleSets')"
            :placeholder="$tc('sw-settings-snippet.general.placeholderSearchBarSets')"
            :initial-search="term"
            @search="onSearch"
        />
    </template>
    {% endblock %}

    <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
    {% block sw_settings_snippet_set_list_smart_bar_header %}
    <template #smart-bar-header>
        <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
        {% block sw_settings_snippet_set_list_smart_bar_header_title %}
        <h2>
            <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
            {% block sw_settings_snippet_set_list_smart_bar_header_title_text %}
            {{ $tc('sw-settings.index.title') }}
            <sw-icon
                name="regular-chevron-right-xs"
                small
            />
            {{ $tc('sw-settings-snippet.general.mainMenuItemGeneral') }}
            {% endblock %}
        </h2>
        {% endblock %}
    </template>
    {% endblock %}

    <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
    {% block sw_settings_snippet_set_list_card %}
    <template #content>
        <sw-card-view>
            <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
            {% block sw_settings_snippet_set_list_card_title %}
            <sw-card position-identifier="sw-settings-snippet-set-list-title">
                <h3>{{ $tc('sw-settings-snippet.setList.title') }}</h3>
                <p>{{ $tc('sw-settings-snippet.setList.description') }}</p>
            </sw-card>
            {% endblock %}

            <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
            {% block sw_settings_snippet_set_list_card_list %}
            <sw-card
                position-identifier="sw-settings-snippet-set-list-card-list"
                :is-loading="isLoading"
                :title="$tc('sw-settings-snippet.setList.cardTitle')"
            >
                <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
                {% block sw_settings_snippet_set_list_card_list_container %}
                <sw-container columns="1fr">
                    <sw-card-section divider="bottom">
                        <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
                        {% block sw_settings_snippet_set_list_card_list_container_header %}
                        <div class="sw-settings-snippet-set-list__actions">
                            <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
                            {% block sw_settings_snippet_set_list_card_list_container_header_btn_export %}
                            <sw-button
                                v-if="false"
                                size="small"
                                variant="ghost"
                                disabled
                            >
                                {{ $tc('sw-settings-snippet.setList.buttonExport') }}
                            </sw-button>
                            {% endblock %}

                            <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
                            {% block sw_settings_snippet_set_list_card_list_container_header_btn_edit_set %}
                            <sw-button
                                v-tooltip="getNoPermissionsTooltip('snippet.editor')"
                                class="sw-settings-snippet-set-list__edit-set-action"
                                size="small"
                                variant="primary"
                                :disabled="!acl.can('snippet.editor') || !snippetsEditable || undefined"
                                @click="onEditSnippetSets"
                            >
                                {{ $tc('sw-settings-snippet.setList.buttonEditSet') }}
                            </sw-button>
                            {% endblock %}

                            <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
                            {% block sw_settings_snippet_set_list_card_list_container_header_btn_split %}
                            <sw-button-group
                                v-tooltip="getNoPermissionsTooltip('snippet.creator', false)"
                                class="sw-settings-snippet-set-list__action-split"
                                split-button
                            >
                                <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
                                {% block sw_settings_snippet_set_list_card_list_container_header_btn_add_set %}
                                <sw-button
                                    class="sw-settings-snippet-set-list__action-add"
                                    size="small"
                                    variant="ghost"
                                    :disabled="!acl.can('snippet.creator') || undefined"
                                    @click="onAddSnippetSet"
                                >
                                    {{ $tc('sw-settings-snippet.setList.buttonAddSet') }}
                                </sw-button>
                                {% endblock %}

                                <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
                                {% block sw_settings_snippet_set_list_card_list_btn_copy_split %}
                                <sw-context-button
                                    headline="hi"
                                    :disabled="!acl.can('snippet.creator') || undefined"
                                >

                                    <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
                                    {% block sw_settings_snippet_set_list_card_btn_copy %}
                                    <template #button>
                                        <sw-button
                                            class="sw-settings-snippet-set-list__action-context-menu"
                                            size="small"
                                            variant="ghost"
                                            :disabled="!acl.can('snippet.creator') || undefined"
                                            square
                                        >
                                            <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
                                            {% block sw_settings_snippet_set_list_card_btn_copy_icon %}
                                            <sw-icon
                                                name="regular-chevron-down-xs"
                                                size="16"
                                            />
                                            {% endblock %}
                                        </sw-button>
                                    </template>
                                    {% endblock %}

                                    <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
                                    {% block sw_settings_snippet_set_list_card_copy_context_menu %}
                                    <sw-context-menu-item variant="headline">
                                        {{ $tc('sw-settings-snippet.setList.splitButtonDuplicateContent') }}
                                    </sw-context-menu-item>
                                    {% endblock %}

                                    <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
                                    {% block sw_settings_snippet_set_list_card_copy_context_divider %}
                                    <sw-context-menu-divider />
                                    {% endblock %}

                                    <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
                                    {% block sw_settings_snippet_set_list_card_copy_context_menu_items %}
                                    <sw-context-menu-item
                                        v-for="set in snippetSets"
                                        :key="set.id"
                                        @click="onClone(set.id)"
                                    >
                                        {{ set.name }}
                                    </sw-context-menu-item>
                                    {% endblock %}
                                </sw-context-button>
                                {% endblock %}
                            </sw-button-group>
                            {% endblock %}
                        </div>
                        {% endblock %}
                    </sw-card-section>
                </sw-container>
                {% endblock %}

                <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
                {% block sw_settings_snippet_set_list_card_list_grid %}
                <template #grid>
                    <sw-grid
                        ref="snippetSetList"
                        :items="snippetSets"
                        :sort-direction="sortDirection"
                        :sort-by="sortBy"
                        :selectable="acl.can('snippet.editor')"
                        :allow-inline-edit="acl.can('snippet.editor')"
                        table
                        @inline-edit-finish="onInlineEditSave"
                        @inline-edit-cancel="onInlineEditCancel"
                        @sw-grid-select-item="onSelectionChanged"
                        @sw-grid-select-all="onSelectionChanged"
                        @sort-column="onSortColumn"
                    >
                        <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
                        {% block sw_settings_snippet_set_list_card_list_grid_template %}
                        <template
                            #columns="{ item }"
                        >
                            <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
                            {% block sw_settings_snippet_set_list_card_list_grid_column_name %}
                            <sw-grid-column
                                flex="minmax(200px, 1fr)"
                                class="sw-settings-snippet-set__column-name"
                                :label="$tc('sw-settings-snippet.setList.columnName')"
                                data-index="name"
                                editable
                                truncate
                                sortable
                            >

                                <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
                                {% block sw_settings_snippet_set_list_card_list_grid_column_name_link %}
                                <router-link :to="{ name: 'sw.settings.snippet.list', query: { ids: [item.id] } }">
                                    {{ item.name }}
                                </router-link>
                                {% endblock %}

                                <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
                                {% block sw_settings_snippet_set_list_card_list_grid_column_name_editor %}
                                <template #inline-edit>
                                    <sw-text-field
                                        ref="nameEditor"
                                        v-model:value="item.name"
                                        name="sw-field--item-name"
                                        :placeholder="$tc('sw-settings-snippet.setList.placeholderName')"
                                    />
                                </template>
                                {% endblock %}
                            </sw-grid-column>
                            {% endblock %}

                            <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
                            {% block sw_settings_snippet_set_list_card_list_grid_column_changed %}
                            <sw-grid-column
                                flex="1fr"
                                class="sw-settings-snippet-set-file__column-changed-at"
                                sortable
                                :label="$tc('sw-settings-snippet.setList.columnChangedAt')"
                                data-index="createdAt"
                            >
                                <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
                                {% block sw_settings_snippet_set_list_card_list_grid_column_changed_date %}
                                <div v-if="item.updatedAt">
                                    {{ dateFilter(item.updatedAt) }}
                                </div>
                                <div v-else>
                                    {{ dateFilter(item.createdAt) }}
                                </div>
                                {% endblock %}
                            </sw-grid-column>
                            {% endblock %}

                            <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
                            {% block sw_settings_snippet_set_list_card_list_grid_column_base_file %}
                            <sw-grid-column
                                flex="minmax(200px, 1fr)"
                                class="sw-settings-snippet-set-file__column-base-file"
                                sortable
                                :label="$tc('sw-settings-snippet.setList.columnBaseFile')"
                                data-index="baseFile"
                                truncate
                            >
                                {{ item.baseFile }}

                                <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
                                {% block sw_settings_snippet_set_list_card_list_grid_column_base_file_editor %}
                                <template #inline-edit>
                                    <sw-select-field
                                        v-model:value="item.baseFile"
                                    >
                                        <option
                                            v-for="file in baseFiles"
                                            :key="file.name"
                                            :value="file.name"
                                        >
                                            {{ file.name }}
                                        </option>
                                    </sw-select-field>
                                </template>
                                {% endblock %}
                            </sw-grid-column>
                            {% endblock %}

                            <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
                            {% block sw_settings_snippet_set_list_card_list_grid_column_base_action %}
                            <sw-grid-column
                                flex="100px"
                                align="center"
                            >
                                <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
                                {% block sw_settings_snippet_set_list_card_list_grid_column_base_action_buttons %}
                                <sw-context-button>
                                    <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
                                    {% block sw_settings_snippet_set_list_card_list_grid_column_base_action_btn_edit %}
                                    <sw-context-menu-item
                                        class="sw-setting-snippet-set-list__edit-action"
                                        :router-link="{ name: 'sw.settings.snippet.list', query: { ids: [item.id] } }"
                                    >
                                        {{ contextMenuEditSnippet }}
                                    </sw-context-menu-item>
                                    {% endblock %}

                                    <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
                                    {% block sw_settings_snippet_set_list_card_list_grid_column_base_action_btn_clone %}
                                    <sw-context-menu-item
                                        v-tooltip.left="getNoPermissionsTooltip('snippet.editor')"
                                        :disabled="!acl.can('snippet.creator') || undefined"
                                        @click="onClone(item.id)"
                                    >
                                        {{ $tc('sw-settings-snippet.setList.contextMenuClone') }}
                                    </sw-context-menu-item>
                                    {% endblock %}

                                    <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
                                    {% block sw_settings_snippet_set_list_card_list_grid_column_base_action_btn_delete %}
                                    <sw-context-menu-item
                                        v-tooltip.left="getNoPermissionsTooltip('snippet.deleter')"
                                        variant="danger"
                                        :disabled="!acl.can('snippet.deleter') || undefined"
                                        @click="onDeleteSet(item.id)"
                                    >
                                        {{ $tc('sw-settings-snippet.setList.contextMenuDelete') }}
                                    </sw-context-menu-item>
                                    {% endblock %}
                                </sw-context-button>
                                {% endblock %}
                            </sw-grid-column>
                            {% endblock %}

                            <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
                            {% block sw_settings_snippet_set_list_columns_delete_modal %}
                            <sw-modal
                                v-if="showDeleteModal === item.id"
                                :title="$tc('global.default.warning')"
                                variant="small"
                                @modal-close="onCloseDeleteModal"
                            >
                                <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
                                {% block sw_settings_snippet_set_list_delete_modal_confirm_delete_text %}
                                <p class="sw-settings-snippet-set-list__confirm-delete-text">
                                    {{ $tc('sw-settings-snippet.setList.textDeleteConfirm', 0, { name: item.name }) }}
                                </p>
                                {% endblock %}

                                <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
                                {% block sw_settings_snippet_set_list_delete_modal_footer %}
                                <template #modal-footer>
                                    <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
                                    {% block sw_settings_snippet_set_list_delete_modal_cancel %}
                                    <sw-button
                                        size="small"
                                        @click="onCloseDeleteModal"
                                    >
                                        {{ $tc('global.default.cancel') }}
                                    </sw-button>
                                    {% endblock %}

                                    <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
                                    {% block sw_settings_snippet_set_list_delete_modal_confirm %}
                                    <sw-button
                                        variant="danger"
                                        size="small"
                                        @click="onConfirmDelete(item.id)"
                                    >
                                        {{ $tc('sw-settings-snippet.setList.buttonDelete') }}
                                    </sw-button>
                                    {% endblock %}
                                </template>
                                {% endblock %}
                            </sw-modal>
                            {% endblock %}

                            <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
                            {% block sw_settings_snippet_set_list_columns_clone_modal %}
                            <sw-modal
                                v-if="showCloneModal === item.id"
                                :title="$tc('sw-settings-snippet.setList.modalTitleClone')"
                                variant="small"
                                @modal-close="closeCloneModal"
                            >
                                <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
                                {% block sw_settings_snippet_set_list_clone_modal_confirm_delete_text %}
                                <p class="sw-settings-snippet-set-list__confirm-delete-text">
                                    {{ $tc('sw-settings-snippet.setList.textCloneConfirm', 0, { name: item.name }) }}
                                </p>
                                {% endblock %}

                                <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
                                {% block sw_settings_snippet_set_list_clone_modal_footer %}
                                <template #modal-footer>
                                    <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
                                    {% block sw_settings_snippet_set_list_clone_modal_cancel %}
                                    <sw-button
                                        size="small"
                                        @click="closeCloneModal"
                                    >
                                        {{ $tc('global.default.cancel') }}
                                    </sw-button>
                                    {% endblock %}

                                    <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
                                    {% block sw_settings_snippet_set_list_clone_modal_confirm %}
                                    <sw-button
                                        variant="primary"
                                        size="small"
                                        @click="onConfirmClone(item.id)"
                                    >
                                        {{ $tc('sw-settings-snippet.setList.buttonClone') }}
                                    </sw-button>
                                    {% endblock %}
                                </template>
                                {% endblock %}
                            </sw-modal>
                            {% endblock %}
                        </template>
                        {% endblock %}

                        <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
                        {% block sw_settings_snippet_set_list_card_list_grid_pagination %}
                        <template #pagination>
                            <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
                            {% block sw_settings_snippet_set_list_card_list_grid_pagination_bar %}
                            <sw-pagination
                                :offset="offset"
                                :limit="limit"
                                :total="total"
                                :total-visible="7"
                                :page="page"
                                @page-change="onPageChange"
                            />
                            {% endblock %}
                        </template>
                        {% endblock %}
                    </sw-grid>
                </template>
                {% endblock %}
            </sw-card>
            {% endblock %}
        </sw-card-view>
    </template>
    {% endblock %}
</sw-page>
{% endblock %}
