{% block sw_theme_modal %}
    <sw-modal class="sw-theme-modal" @modal-close="closeModal" :title="$tc('sw-theme-manager.themeModal.modalTitle')">

        {% block sw_theme_modal_header %}
            <div class="sw-theme-modal__header">

                {% block sw_theme_modal_header_title %}
                    <div class="sw-theme-modal__header-title">
                        {{ $tc('sw-theme-manager.themeModal.headline') }}
                    </div>
                {% endblock %}

                {% block sw_theme_modal_header_search %}
                    <sw-simple-search-field class="sw-theme-modal__header-search"
                        :placeholder="$tc('sw-theme-manager.general.placeholderSearchBar')"
                        @search-term-change="onSearch">
                    </sw-simple-search-field>
                {% endblock %}

            </div>
        {% endblock %}

        {% block sw_theme_modal_content %}
            <div class="sw-theme-modal__content">

                {% block sw_theme_modal_loader %}
                    <sw-loader v-if="isLoading"></sw-loader>
                {% endblock %}

                {% block sw_theme_modal_content %}
                    <sw-container v-else columns="repeat(auto-fill, minmax(250px, 1fr))" gap="24px">
                        {% block sw_theme_modal_content_listing %}
                            <div v-for="theme in themes" class="sw-theme-modal__content-item" :class="{ 'is--selected': theme.id === selected }">
                                {% block sw_theme_modal_content_listing_item %}

                                    {% block sw_theme_modal_content_listing_item_checkbox %}
                                        <sw-checkbox-field @change="onSelection(theme.id)" :value="theme.id === selected"></sw-checkbox-field>
                                    {% endblock %}

                                    {% block sw_theme_modal_content_listing_item_inner %}
                                        <sw-theme-list-item
                                            :theme="theme"
                                            :key="theme.id"
                                            @item-click="selectItem(theme.id)">
                                        </sw-theme-list-item>
                                    {% endblock %}

                                {% endblock %}
                            </div>
                        {% endblock %}
                    </sw-container>
                {% endblock %}
            </div>
        {% endblock %}

        {% block sw_theme_modal_footer %}
            <template #modal-footer>
                <sw-button @click="closeModal">
                    {{ $tc('sw-theme-manager.themeModal.actionCancel') }}
                </sw-button>
                <sw-button @click="selectLayout" variant="primary">
                    {{ $tc('sw-theme-manager.themeModal.actionConfirm') }}
                </sw-button>
            </template>
        {% endblock %}

    </sw-modal>
{% endblock %}
