@php
    use App\Enums\CustomContentType;
    use App\Enums\CustomElementType;
@endphp
<div style="display: none" v-html="getOption(item.custom_elements, item.id)"></div>
<div v-if="item && item.status && item.custom_elements && options[`${item.id}`]"
    :style="`background-color:#${fieldPropertyValue('bg_color', options[`${item.id}`])}`" class="custom-content-v2">
    <template v-if="fieldPropertyValue('custom_element_type', item) > @json(CustomElementType::FOUR_COLUMN)">
        <div class="pc swiper horizontal_swiper" :data-displayed-results="options[`${item.id}`]?.displayed_results ?? 3">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="(content, index) in item.custom_elements.contents" :key="index"
                    :style="getStyle(options[`${item.id}`])">
                    <template v-for="(val, ind) in content">
                        <div v-if="val.type == @json(CustomContentType::TEXT)" v-html="htmlCustomText(val)"></div>
                        <div v-if="val.type == @json(CustomContentType::BUTTON)" v-html="htmlCustomButton(val)"></div>
                        <div v-if="val.type == @json(CustomContentType::IMAGE)" v-html="htmlCustomImage(val)"></div>
                        <div v-if="val.type == @json(CustomContentType::LINE)" :key="ind"
                            style="position: relative" :style="setStyleCustom(val)">
                        </div>
                    </template>
                </div>
            </div>
            <div class="swiper-button flex">
                <div class="swiper-button-custom swiper-button-custom-prev swiper-button-prev"></div>
                <div class="swiper-button-custom swiper-button-custom-next swiper-button-next"></div>
            </div>
        </div>
        <div v-if="getClassSwiper(options[`${item.id}`])" class="sp" :class="getClassSwiper(options[`${item.id}`])">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="(content, index) in item.custom_elements.contents"
                    :key="index" :style="getStyle(options[`${item.id}`])">
                    <template v-for="(val, ind) in content">
                        <div v-if="val.type == @json(CustomContentType::TEXT)" v-html="htmlCustomText(val)"></div>
                        <div v-if="val.type == @json(CustomContentType::BUTTON)" v-html="htmlCustomButton(val)"></div>
                        <div v-if="val.type == @json(CustomContentType::IMAGE)" v-html="htmlCustomImage(val)"></div>
                        <div v-if="val.type == @json(CustomContentType::LINE)" :key="ind"
                            style="position: relative" :style="setStyleCustom(val)">
                        </div>
                    </template>
                </div>
            </div>
            <div class="swiper-button flex">
                <div class="swiper-button-custom swiper-button-custom-prev swiper-button-prev"></div>
                <div class="swiper-button-custom swiper-button-custom-next swiper-button-next"></div>
            </div>
        </div>
        <div v-else class="sp" :style="getStyle(options[`${item.id}`])">
            <div class="content-custom" v-for="(content, index) in item.custom_elements.contents"
                :key="index" :style="getStyle(options[`${item.id}`])">
                <template v-for="(val, ind) in content">
                    <div v-if="val.type == @json(CustomContentType::TEXT)" v-html="htmlCustomText(val)"></div>
                    <div v-if="val.type == @json(CustomContentType::BUTTON)" v-html="htmlCustomButton(val)"></div>
                    <div v-if="val.type == @json(CustomContentType::IMAGE)" v-html="htmlCustomImage(val)"></div>
                    <div v-if="val.type == @json(CustomContentType::LINE)" :key="ind"
                        style="position: relative" :style="setStyleCustom(val)">
                    </div>
                </template>
            </div>
        </div>
    </template>
    <template v-else>
        <template v-if="getClassSwiper(options[`${item.id}`])">
            <div class="sp" :class="getClassSwiper(options[`${item.id}`])">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" v-for="(content, index) in item.custom_elements.contents"
                        :key="index" :style="getStyle(options[`${item.id}`])">
                        <template v-for="(val, ind) in content">
                            <div v-if="val.type == @json(CustomContentType::TEXT)" v-html="htmlCustomText(val)"></div>
                            <div v-if="val.type == @json(CustomContentType::BUTTON)" v-html="htmlCustomButton(val)"></div>
                            <div v-if="val.type == @json(CustomContentType::IMAGE)" v-html="htmlCustomImage(val)"></div>
                            <div v-if="val.type == @json(CustomContentType::LINE)" :key="ind"
                                style="position: relative" :style="setStyleCustom(val)">
                            </div>
                        </template>
                    </div>
                </div>
                <div class="swiper-button flex">
                    <div class="swiper-button-custom swiper-button-prev"></div>
                    <div class="swiper-button-custom swiper-button-next"></div>
                </div>
            </div>
            <div class="pc-grid sp-none" :class="fieldPropertyValue('position', options[`${item.id}`]) == 'start' ? 'align-start' : 'align-end'" :style="getStyle(options[`${item.id}`])">
                <div class="content-custom" v-for="(content, index) in item.custom_elements.contents"
                    :key="index">
                    <template v-for="(val, ind) in content">
                        <div v-if="val.type == @json(CustomContentType::TEXT)" v-html="htmlCustomText(val)"></div>
                        <div v-if="val.type == @json(CustomContentType::BUTTON)" v-html="htmlCustomButton(val)"></div>
                        <div v-if="val.type == @json(CustomContentType::IMAGE)" v-html="htmlCustomImage(val)"></div>
                        <div v-if="val.type == @json(CustomContentType::LINE)" :key="ind"
                            style="position: relative" :style="setStyleCustom(val)">
                        </div>
                    </template>
                </div>
            </div>
        </template>
        <div v-else class="pc-grid" :class="fieldPropertyValue('position', options[`${item.id}`]) == 'start' ? 'align-start' : 'align-end'" :style="getStyle(options[`${item.id}`])">
            <div class="content-custom" v-for="(content, index) in item.custom_elements.contents"
                :key="index">
                <template v-for="(val, ind) in content">
                    <div v-if="val.type == @json(CustomContentType::TEXT)" v-html="htmlCustomText(val)"></div>
                    <div v-if="val.type == @json(CustomContentType::BUTTON)" v-html="htmlCustomButton(val)"></div>
                    <div v-if="val.type == @json(CustomContentType::IMAGE)" v-html="htmlCustomImage(val)"></div>
                    <div v-if="val.type == @json(CustomContentType::LINE)" :key="ind"
                        style="position: relative" :style="setStyleCustom(val)">
                    </div>
                </template>
            </div>
        </div>
    </template>
</div>