<!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
{% block sw_product_detail_layout %}
<div v-if="isLoading">
    <sw-skeleton variant="detail-bold" />
    <sw-skeleton />
</div>

<div
    v-else
    class="sw-product-detail-layout"
>
    <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
    {% block sw_product_detail_layout_assignment %}
    <sw-card
        position-identifier="sw-product-detail-layout-assignment"
        :title="$tc('sw-product.layout.title')"
        :subtitle="$tc('sw-product.layout.subtitle')"
    >

        <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
        {% block sw_product_detail_layout_content %}
        <sw-product-layout-assignment
            :cms-page="currentPage"
            @modal-layout-open="onOpenLayoutModal"
            @button-edit-click="onOpenInPageBuilder"
            @button-delete-click="onResetLayout"
        />
        {% endblock %}

        <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
        {% block sw_product_detail_layout_modal %}
        <sw-cms-layout-modal
            v-if="showLayoutModal"
            :headline="$tc('sw-product.layoutAssignment.subtitle')"
            :pre-selection="currentPage"
            :cms-page-types="['product_detail']"
            @modal-layout-select="onSelectLayout"
            @modal-close="onCloseLayoutModal"
        />
        {% endblock %}
    </sw-card>
    {% endblock %}

    <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
    {% block sw_product_detail_layout_cms_config %}
    <template v-if="acl.can('product.editor') && currentPage">
        <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
        {% block sw_product_detail_layout_cms_config_form %}
        <sw-cms-page-form
            v-if="showCmsForm"
            :page="currentPage"
            :element-update="elementUpdate"
        />

        <sw-card
            v-else
            class="sw-product-detail-layout__no-config"
            position-identifier="sw-product-detail-layout-no-config"
            :is-loading="isConfigLoading"
        >
            <p>{{ $tc('sw-product.layout.textNoConfig') }}</p>
        </sw-card>
        {% endblock %}

        <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
        {% block sw_product_detail_layout_cms_content_info %}
        <sw-card
            hero
            position-identifier="sw-product-detail-layout-cms-info"
        >
            <p class="sw-product-detail-layout__content-info">
                {{ $tc('sw-product.layout.textContentInfo') }}
            </p>
        </sw-card>
        {% endblock %}
    </template>
    {% endblock %}
</div>
{% endblock %}
