@php
    use App\Enums\MultiLangMode;
    use App\Enums\RoomDetailPage;
@endphp

<div class="room-categories" v-if="otherRooms">
    <div class="container">
        <div class="room-categories__title heading-main pc" data-i18n="room_detail.other_room.title"></div>
        <div class="room-categories__title heading-main sp" data-i18n="room_detail.other_room.title_sp"></div>
        <div class="room-categories__desc" data-i18n="room_detail.other_room.desc"></div>
        <div class="room-categories__main">
            <div class="swiper swiper-categories" style="width: 100%">
                <div class="swiper-wrapper categories-main__box">
                    <div class="swiper-slide categories-box__banner" v-for="room in otherRooms">
                        <div class="image-aspect">
                            <img class="pc" :src="setImageRoot(room)">
                            <img class="sp" :src="setImageRoot(room, true)">
                        </div>
                        <div class="categories-box__heading">
                            <div class="box-heading__title subheading-main">
                                <span class="pc" v-html="fieldPropertyValue('name_ja', room)">
                                </span>
                                <span class="sp" v-html="fieldPropertyValue('name_ja_sp', room)">
                                </span>
                            </div>
                            <div class="box-heading__desc">
                                <span class="pc" v-html="fieldPropertyValue('body', room)"></span>
                                <span class="sp" v-html="fieldPropertyValue('body_sp', room)"></span>
                            </div>
                            <a class="box-heading__button"
                                v-if="fieldPropertyValue('detail_page', room) != @json(RoomDetailPage::NO_DETAIL)"
                                :href="`${typeof roomUrl === 'undefined' ? '' : roomUrl}/detail?id=${fieldPropertyValue('id', room)}`"
                                data-i18n="btn_detail"> </a>
                        </div>
                    </div>
                </div>
                <div class="box-pagination">
                    <div class="swiper-button-prev custom-button custom-button__prev" v-if="otherRooms.length > 1">
                    </div>
                    <div class="swiper-pagination"></div>
                    <div class="swiper-button-next custom-button custom-button__next" v-if="otherRooms.length > 1">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>