<!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
{% block sw_settings_listing_default_sales_channel %}
<div class="sw-settings-listing-default-sales-channel">
    <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
    {% block sw_settings_listing_default_sales_channel_loader %}
    <sw-loader v-if="isLoading || isDefaultSalesChannelLoading" />
    {% endblock %}

    <template v-else>
        <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
        {% block sw_settings_listing_default_sales_channel_description %}
        <p class="sw-settings-listing-default-sales-channel__description">
            {{ $tc('sw-settings-listing.index.defaultSalesChannel.description') }}
        </p>
        {% endblock %}

        <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
        {% block sw_settings_listing_default_sales_channel_select %}
        <sw-entity-multi-id-select
            v-model:value="configData[null]['core.defaultSalesChannel.salesChannel']"
            :repository="salesChannelRepository"
            :label="$tc('sw-settings.system-config.labelSalesChannelSelect')"
            :placeholder="$tc('sw-product.visibility.placeholderVisibility')"
            @update:value="updateSalesChannel"
        />
        {% endblock %}

        <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
        {% block sw_settings_listing_default_sales_channeld_setting %}
        <div class="sw-settings-listing-default-sales-channel__options-container">
            <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
            {% block sw_settings_listing_default_sales_channel_setting_active %}
            <sw-switch-field
                v-model:value="configData[null]['core.defaultSalesChannel.active']"
                class="sw-settings-listing-default-sales-channel__active-switch"
                :label="$tc('sw-product.settingsForm.labelActive')"
            />
            {% endblock %}

            <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
            {% block sw_settings_listing_default_sales_channel_setting_visibility %}
            <a
                v-if="salesChannel.length > 0"
                class="sw-settings-listing-default-sales-channel__quick-link"
                role="button"
                tabindex="0"
                @click="displayAdvancedVisibility"
                @keydown.enter="displayAdvancedVisibility"
            >
                {{ $tc('sw-settings-listing.index.defaultSalesChannel.linkAdvancedVisibility') }}
                <sw-icon
                    class="sw-settings-listing-default-sales-channel__link-icon"
                    name="regular-long-arrow-right"
                    small
                />
            </a>
            {% endblock %}
        </div>
        {% endblock %}

        <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
        {% block sw_settings_listing_default_sales_channel_select_visibiliy_modal %}
        <sw-modal
            v-if="displayVisibilityDetail"
            variant="large"
            class="sw-settings-listing-default-sales-channel__visibility-modal"
            :title="$tc('sw-product.visibility.textHeadline')"
            @modal-close="closeAdvancedVisibility"
        >
            <p>{{ $tc('sw-product.visibility.visibilityModalDescription') }}</p>

            <sw-settings-listing-visibility-detail
                ref="visibilityConfig"
                :config="visibilityConfig"
            />

            <template #modal-footer>
                <sw-button
                    variant="primary"
                    size="small"
                    @click="closeAdvancedVisibility"
                >
                    {{ $tc('global.default.apply') }}
                </sw-button>
            </template>
        </sw-modal>
        {% endblock %}
    </template>
</div>
{% endblock %}
