<div>
    <template
        v-for="componentSection in componentSections"
        :key="componentSection.props.locationId"
    >
        {# These components should not contain a position identifier because it is generally rendered #}
        <sw-card
            v-if="componentSection.component === 'card'"
            position-identifier=""
            :title="$tc(componentSection?.props?.title ?? '')"
            :subtitle="$tc(componentSection?.props?.subtitle ?? '')"
            :content-padding="componentSection.props?.contentPadding ?? true"
        >

            <template
                v-if="componentSection.props?.tabs"
                #tabs
            >
                <sw-tabs
                    position-identifier=""
                    @new-item-active="setActiveTab($event.name)"
                >
                    <sw-tabs-item
                        v-for="tab in componentSection.props.tabs"
                        :key="tab.name"
                        :active-tab="getActiveTab(componentSection).name"
                        :name="tab.name"
                    >
                        {{ $tc(tab.label ?? '') }}
                    </sw-tabs-item>
                </sw-tabs>
            </template>

            <sw-iframe-renderer
                v-if="componentSection.props?.tabs && getActiveTab(componentSection)"
                :key="getActiveTab(componentSection).name"
                :src="componentSection.src"
                :location-id="getActiveTab(componentSection)?.locationId"
            />

            <sw-iframe-renderer
                v-if="componentSection.props?.locationId && !componentSection.props?.tabs"
                :src="componentSection.src"
                :location-id="componentSection.props.locationId"
            />
        </sw-card>
    </template>
</div>
