@php
    use App\Enums\DisplayContent;
@endphp

<div class="rooms-content relative pc" v-if="fieldPropertyValue('display_content', item) == @json(DisplayContent::VIEW_DETAIL)">
    <div class="container">
        <div class="room-slide">
            <div class="swiper-detail" v-if="room.image_slide">
                <div class="detail-slide">
                    <div class="detail-swiper swiper">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide" v-for="image in room.image_slide">
                                <div class="image-aspect"><img :src="setImagePreview(image)" alt="" /></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="swiper-pagination"></div>
                <div class="swiper-button-prev pc"></div>
                <div class="swiper-button-next pc"></div>
            </div>
        </div>
        <div class="material">
            <div class="material-content">
                <div class="material-content__row">
                    <div class="material-content__name" data-i18n="room_detail.text_breadth"></div>
                    <div class="material-content__txt">
                        <span v-if="room.breadth" v-html="`${room.breadth}㎡`"></span>
                    </div>
                </div>
                <div class="material-content__row">
                    <div class="material-content__name" data-i18n="room_detail.text_capacity"></div>
                    <div class="material-content__txt">
                        <span v-if="room.capacity" v-html="room.capacity"></span>
                        <span v-if="room.capacity" data-i18n="room_detail.text_capacity_include"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="rooms-content relative sp"
    v-if="fieldPropertyValue('display_content_sp', item) == @json(DisplayContent::VIEW_DETAIL)">
    <div class="container">
        <div class="room-slide">
            <div class="swiper-detail" v-if="room.image_slide_sp">
                <div class="detail-slide">
                    <div class="detail-swiper swiper">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide" v-for="image in room.image_slide_sp">
                                <div class="image-aspect"><img :src="setImagePreview(image)" alt="" /></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="material">
            <div class="material-content">
                <div class="material-content__row">
                    <div class="material-content__name" data-i18n="room_detail.text_breadth"></div>
                    <div class="material-content__txt">
                        <span v-if="room.breadth" v-html="`${room.breadth}㎡`"></span>
                    </div>
                </div>
                <div class="material-content__row">
                    <div class="material-content__name" data-i18n="room_detail.text_capacity"></div>
                    <div class="material-content__txt">
                        <span v-if="room.capacity" v-html="room.capacity"></span>
                        <span v-if="room.capacity" data-i18n="room_detail.text_capacity_include"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>