<sw-page
    class="sw-generic-custom-entity-detail"
    :header-border-color="entityAccentColor"
>
    <template #smart-bar-header>
        <h2 class="sw-generic-custom-entity-detail__title">
            {{ placeholder(customEntityData, titlePropertyName, $tc(`${customEntityName}.moduleTitle`)) }}
        </h2>
    </template>

    <template #smart-bar-actions>
        <sw-button-process
            class="sw-generic-custom-entity-detail__save-action"
            :is-loading="isLoading"
            :process-success="isSaveSuccessful"
            variant="primary"
            :disabled="isLoading"
            @update:process-success="saveFinish"
            @click="onSave"
        >
            {{ $tc('global.default.save') }}
        </sw-button-process>
    </template>

    <template #language-switch>
        <sw-language-switch @on-change="onChangeLanguage" />
    </template>

    <template #content>
        <sw-card-view>
            <sw-tabs
                v-if="detailTabs"
                class="sw-generic-custom-entity-detail__tabs"
                position-identifier="sw-generic-custom-entity-detail-tabs"
                :default-item="mainTabName"
                :small="false"
            >
                <template #default="{ active }">
                    <sw-tabs-item
                        v-for="tab in detailTabs"
                        :key="`tab-item-${tab.name}`"
                        class="sw-generic-custom-entity-detail__tab-item"
                        :name="tab.name"
                        :active-tab="active"
                    >
                        {{ getLabel('tabs', tab.name) }}
                    </sw-tabs-item>

                    <sw-tabs-item
                        v-if="customEntityDataDefinition?.flags?.['cms-aware']"
                        class="sw-generic-custom-entity-detail__tab-item"
                        name="cms-aware-tab-layout"
                        :active-tab="active"
                    >
                        {{ $tc('sw-custom-entity.detail.tabs.layout') }}
                    </sw-tabs-item>

                    <sw-tabs-item
                        v-if="customEntityDataDefinition?.flags?.['cms-aware']"
                        class="sw-generic-custom-entity-detail__tab-item"
                        name="cms-aware-tab-seo"
                        :active-tab="active"
                    >
                        {{ $tc('sw-custom-entity.detail.tabs.seo') }}
                    </sw-tabs-item>
                </template>

                <template #content="{ active }">
                    <template
                        v-for="tab in detailTabs"
                        :key="`tab-${tab.name}`"
                    >
                        <div
                            v-if="active === tab.name"
                            class="sw-generic-custom-entity-detail__tab"
                        >
                            <sw-card
                                v-for="card in tab.cards"
                                :key="`card-${card.name}`"
                                class="sw-generic-custom-entity-detail__card"
                                position-identifier="`sw-generic-custom-entity-detail-tab-${card.name}`"
                                :title="getLabel('cards', card.name)"
                            >
                                <template v-if="!isLoading">
                                    <sw-custom-entity-input-field
                                        v-for="field in card.fields"
                                        :key="field.ref"
                                        v-model:value="customEntityData[field.ref]"
                                        class="sw-generic-custom-entity-detail__field"
                                        :type="getType(field.ref)"
                                        :label="getLabel('fields', field.ref)"
                                        :placeholder="getPlaceholder('fields', field.ref)"
                                        :help-text="getHelpText('fields', field.ref)"
                                    />
                                </template>
                            </sw-card>
                        </div>
                    </template>

                    <sw-generic-cms-page-assignment
                        v-if="active === 'cms-aware-tab-layout'"
                        :cms-page-id="customEntityData?.swCmsPageId"
                        :slot-overrides="customEntityData?.swSlotConfig"
                        class="sw-generic-custom-entity-detail__tab sw-generic-custom-entity-detail__tab-cms-aware"
                        @update:cms-page-id="updateCmsPageId"
                        @update:slot-overrides="updateCmsSlotOverwrites"
                        @create-layout="onCreateLayout"
                    />

                    <template
                        v-else-if="active === 'cms-aware-tab-seo'"
                    >
                        <sw-generic-seo-general-card
                            :seo-meta-title="customEntityData?.swSeoMetaTitle"
                            :seo-meta-description="customEntityData?.swSeoMetaDescription"
                            :seo-url="customEntityData?.swSeoUrl"
                            @update:seo-meta-title="updateSeoMetaTitle"
                            @update:seo-meta-description="updateSeoMetaDescription"
                            @update:seo-url="updateSeoUrl"
                        />

                        <sw-generic-social-media-card
                            :og-title="customEntityData?.swOgTitle"
                            :og-description="customEntityData?.swOgDescription"
                            :og-image-id="customEntityData?.swOgImageId"
                            @update:og-title="updateOgTitle"
                            @update:og-description="updateOgDescription"
                            @update:og-image-id="updateOgImageId"
                        />
                    </template>
                </template>
            </sw-tabs>
        </sw-card-view>
    </template>
</sw-page>
