@php
    use App\Enums\Boolean;
@endphp
<section class="slide-top">
    <div class="swiper-detail">
        <div class="detail-slide">
            <div class="detail-swiper swiper">
                <div class="swiper-wrapper">
                    <a class="swiper-slide" href="{!! setUrl($project->id, $domainPublish ?? false, $lang) !!}">
                        <div class="overlay"> </div>
                        <div class="image-aspect">
                            <img src="{!! setImagePreview(fieldPropertyValue('top_transition_image', $basic)) !!}" alt="" />
                        </div>
                        <div class="desc">
                            <h2 class="txt-title">
                                {!! setTextDefault(textLocale('top_transition_title', $basic, $lang)) !!}
                            </h2>
                            <p class="txt-desc">
                                {!! setTextDefault(textLocale('top_transition_introduction', $basic, $lang)) !!}
                            </p>
                        </div>
                        <div class="icon-more">
                            <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewbox="0 0 36 36">
                                <g id="Group_1275" data-name="Group 1275" transform="translate(-354 -8123)">
                                    <circle id="Ellipse_653" data-name="Ellipse 653" cx="18" cy="18"
                                        r="18" transform="translate(354 8123)" fill="#fff"></circle>
                                    <g id="chevron-right" transform="translate(360 8129)">
                                        <path id="Path_8494" data-name="Path 8494" d="M0,0H24V24H0Z" fill="none">
                                        </path>
                                        <path id="Path_8495" data-name="Path 8495" d="M9,6l6,6L9,18"
                                            transform="translate(0 0)" fill="none" stroke="#413b38"
                                            stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
                                    </g>
                                </g>
                            </svg>
                        </div>
                    </a>
                    @if ($project->show_room == Boolean::TRUE && fieldPropertyValue('room_transition', $basic))
                        <a class="swiper-slide" href="{!! setUrl($project->id, $domainPublish ?? false, $lang, $project->room_url) !!}">
                            <div class="overlay"> </div>
                            <div class="image-aspect">
                                <img src="{!! setImagePreview(fieldPropertyValue('room_transition_image', $basic)) !!}" alt="" />
                            </div>
                            <div class="desc">
                                <h2 class="txt-title">
                                    {!! setTextDefault(textLocale('room_transition_title', $basic, $lang)) !!}
                                </h2>
                                <p class="txt-desc">
                                    {!! setTextDefault(textLocale('room_transition_introduction', $basic, $lang)) !!}
                                </p>
                            </div>
                            <div class="icon-more">
                                <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36"
                                    viewbox="0 0 36 36">
                                    <g id="Group_1275" data-name="Group 1275" transform="translate(-354 -8123)">
                                        <circle id="Ellipse_653" data-name="Ellipse 653" cx="18"
                                            cy="18" r="18" transform="translate(354 8123)" fill="#fff">
                                        </circle>
                                        <g id="chevron-right" transform="translate(360 8129)">
                                            <path id="Path_8494" data-name="Path 8494" d="M0,0H24V24H0Z"
                                                fill="none">
                                            </path>
                                            <path id="Path_8495" data-name="Path 8495" d="M9,6l6,6L9,18"
                                                transform="translate(0 0)" fill="none" stroke="#413b38"
                                                stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
                                            </path>
                                        </g>
                                    </g>
                                </svg>
                            </div>
                        </a>
                    @endif
                    @if ($project->show_food_list == Boolean::TRUE && fieldPropertyValue('cooking_transition', $basic))
                        <a class="swiper-slide" href="{!! setUrl($project->id, $domainPublish ?? false, $lang, $project->food_list_url) !!}">
                            <div class="overlay"> </div>
                            <div class="image-aspect">
                                <img src="{!! setImagePreview(fieldPropertyValue('cooking_transition_image', $basic)) !!}" alt="" />
                            </div>
                            <div class="desc">
                                <h2 class="txt-title">
                                    {!! setTextDefault(textLocale('cooking_transition_title', $basic, $lang)) !!}
                                </h2>
                                <p class="txt-desc">
                                    {!! setTextDefault(textLocale('cooking_transition_introduction', $basic, $lang)) !!}
                                </p>
                            </div>
                            <div class="icon-more">
                                <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36"
                                    viewbox="0 0 36 36">
                                    <g id="Group_1275" data-name="Group 1275" transform="translate(-354 -8123)">
                                        <circle id="Ellipse_653" data-name="Ellipse 653" cx="18"
                                            cy="18" r="18" transform="translate(354 8123)" fill="#fff">
                                        </circle>
                                        <g id="chevron-right" transform="translate(360 8129)">
                                            <path id="Path_8494" data-name="Path 8494" d="M0,0H24V24H0Z"
                                                fill="none">
                                            </path>
                                            <path id="Path_8495" data-name="Path 8495" d="M9,6l6,6L9,18"
                                                transform="translate(0 0)" fill="none" stroke="#413b38"
                                                stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
                                            </path>
                                        </g>
                                    </g>
                                </svg>
                            </div>
                        </a>
                    @endif
                    @if ($project->show_facility == Boolean::TRUE && fieldPropertyValue('facility_transition', $basic))
                        <a class="swiper-slide" href="{!! setUrl($project->id, $domainPublish ?? false, $lang, $project->facility_url) !!}">
                            <div class="overlay"> </div>
                            <div class="image-aspect">
                                <img src="{!! setImagePreview(fieldPropertyValue('facility_transition_image', $basic)) !!}" alt="" />
                            </div>
                            <div class="desc">
                                <h2 class="txt-title">
                                    {!! setTextDefault(textLocale('facility_transition_title', $basic, $lang)) !!}
                                </h2>
                                <p class="txt-desc">
                                    {!! setTextDefault(textLocale('facility_transition_introduction', $basic, $lang)) !!}
                                </p>
                            </div>
                            <div class="icon-more">
                                <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36"
                                    viewbox="0 0 36 36">
                                    <g id="Group_1275" data-name="Group 1275" transform="translate(-354 -8123)">
                                        <circle id="Ellipse_653" data-name="Ellipse 653" cx="18"
                                            cy="18" r="18" transform="translate(354 8123)" fill="#fff">
                                        </circle>
                                        <g id="chevron-right" transform="translate(360 8129)">
                                            <path id="Path_8494" data-name="Path 8494" d="M0,0H24V24H0Z"
                                                fill="none">
                                            </path>
                                            <path id="Path_8495" data-name="Path 8495" d="M9,6l6,6L9,18"
                                                transform="translate(0 0)" fill="none" stroke="#413b38"
                                                stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
                                            </path>
                                        </g>
                                    </g>
                                </svg>
                            </div>
                        </a>
                    @endif
                    @if ($project->show_sightseeing == Boolean::TRUE && fieldPropertyValue('sightseeing_transition', $basic))
                        <a class="swiper-slide" href="{!! setUrl($project->id, $domainPublish ?? false, $lang, $project->sightseeing_url) !!}">
                            <div class="overlay"> </div>
                            <div class="image-aspect">
                                <img src="{!! setImagePreview(fieldPropertyValue('sightseeing_transition_image', $basic)) !!}" alt="" />
                            </div>
                            <div class="desc">
                                <h2 class="txt-title">
                                    {!! setTextDefault(textLocale('sightseeing_transition_title', $basic, $lang)) !!}
                                </h2>
                                <p class="txt-desc">
                                    {!! setTextDefault(textLocale('sightseeing_transition_introduction', $basic, $lang)) !!}
                                </p>
                            </div>
                            <div class="icon-more">
                                <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36"
                                    viewbox="0 0 36 36">
                                    <g id="Group_1275" data-name="Group 1275" transform="translate(-354 -8123)">
                                        <circle id="Ellipse_653" data-name="Ellipse 653" cx="18"
                                            cy="18" r="18" transform="translate(354 8123)" fill="#fff">
                                        </circle>
                                        <g id="chevron-right" transform="translate(360 8129)">
                                            <path id="Path_8494" data-name="Path 8494" d="M0,0H24V24H0Z"
                                                fill="none">
                                            </path>
                                            <path id="Path_8495" data-name="Path 8495" d="M9,6l6,6L9,18"
                                                transform="translate(0 0)" fill="none" stroke="#413b38"
                                                stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
                                            </path>
                                        </g>
                                    </g>
                                </svg>
                            </div>
                        </a>
                    @endif
                    @if ($project->show_access == Boolean::TRUE && fieldPropertyValue('sightseeing_transition', $basic))
                        <a class="swiper-slide" href="{!! setUrl($project->id, $domainPublish ?? false, $lang, $project->access_url) !!}">
                            <div class="overlay"> </div>
                            <div class="image-aspect">
                                <img src="{!! setImagePreview(fieldPropertyValue('access_transition_image', $basic)) !!}" alt="" />
                            </div>
                            <div class="desc">
                                <h2 class="txt-title">
                                    {!! setTextDefault(textLocale('access_transition_title', $basic, $lang)) !!}
                                </h2>
                                <p class="txt-desc">
                                    {!! setTextDefault(textLocale('access_transition_introduction', $basic, $lang)) !!}
                                </p>
                            </div>
                            <div class="icon-more">
                                <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36"
                                    viewbox="0 0 36 36">
                                    <g id="Group_1275" data-name="Group 1275" transform="translate(-354 -8123)">
                                        <circle id="Ellipse_653" data-name="Ellipse 653" cx="18"
                                            cy="18" r="18" transform="translate(354 8123)" fill="#fff">
                                        </circle>
                                        <g id="chevron-right" transform="translate(360 8129)">
                                            <path id="Path_8494" data-name="Path 8494" d="M0,0H24V24H0Z"
                                                fill="none">
                                            </path>
                                            <path id="Path_8495" data-name="Path 8495" d="M9,6l6,6L9,18"
                                                transform="translate(0 0)" fill="none" stroke="#413b38"
                                                stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
                                            </path>
                                        </g>
                                    </g>
                                </svg>
                            </div>
                        </a>
                    @endif
                </div>
            </div>
        </div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>
</section>