@php global $chirkashi; @endphp

@php
    $firstHero = isset($dynamicPageModel) ? data_get($dynamicPageModel, 'content.list_hero.0', []) : [];
    $mediaList = data_get($firstHero, 'list_media_list', []);
    $hero = collect($mediaList)->map(function ($media, $index) use ($firstHero) {
        return [
            'title' => isset($firstHero['string_hero_title']) ? clean($firstHero['string_hero_title']) : null,
            'subtitle' => $firstHero['string_hero_subtitle'] ?? null,
            'text' => isset($firstHero['wysiwyg_hero_description'])
                ? clean($firstHero['wysiwyg_hero_description'])
                : null,
            'button' => [
                'url' => data_get($firstHero, 'list_hero_cta.0.string_hero_cta_url'),
                'title' => data_get($firstHero, 'list_hero_cta.0.string_hero_cta_label'),
            ],
            'video_file' => !empty($media['string_local_video']) ? asset($media['string_local_video']) : null,
            'image' => !empty($media['image_picture']) ? asset($media['image_picture']) : null,
            'image_borders' => [
                'desktop' => ['left' => true, 'right' => true, 'top' => true, 'bottom' => true],
                'mobile' => ['left' => false, 'right' => false, 'top' => false, 'bottom' => true],
            ],
        ];
    })->all();
@endphp

@if (!empty($hero) and is_array($hero))
    <div class="hero fw">
        <div class="hero__container">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    @php $hero_i = 0; @endphp
                    @foreach ($hero as $h)
                        <div class="swiper-slide">
                            <div class="hero__block hero-block image-border-wrap"
                                @if (empty($h['video_file'])) style="background-image: url({{ $h['image'] }});" @endif>
                                @if (!empty($h['video_file']))
                                    <div class="hero__video">
                                        <video autoplay muted loop playsinline>
                                            <source src="{{ $h['video_file'] }}">
                                        </video>
                                    </div>
                                @endif
                                <div class="hero-block__wrapper wrapper">
                                    @if (!empty($h['title']) || !empty($h['subtitle']) || !empty($h['text']))
                                        <div class="hero__block-info">
                                            @if (!empty($h['title']))
                                                @if ($hero_i == 0)
                                                    <h1 class="hero__block-title">{!! $h['title'] !!}</h1>
                                                @else
                                                    <h2 class="hero__block-title">{!! $h['title'] !!}</h2>
                                                @endif
                                            @endif
                                            @if (!empty($h['subtitle']))
                                                <div class="hero__block-subtitle">{{ $h['subtitle'] }}</div>
                                            @endif
                                            @if (!empty($h['text']))
                                                <div class="hero__block-text description">{!! $h['text'] !!}</div>
                                            @endif
                                            @if (!empty($h['button']) && isset($h['button']['url']) && isset($h['button']['title']))
                                                <a class="btn" href="{{ $h['button']['url'] }}"
                                                    title="{{ $h['button']['title'] }}">{{ $h['button']['title'] }} <i
                                                        class="btn__icon btn__icon_arrow-right"></i></a>
                                            @endif
                                        </div>
                                    @endif
                                    <div class="hero__nav hero-nav hero-nav_{{ count($hero) }}">
                                        <div class="hero-nav__arrow hero-nav__arrow_prev"></div>
                                        <div class="hero-nav__arrow hero-nav__arrow_next"></div>
                                    </div>
                                </div>
                                <x-front.borders :borders="!empty($h['image_borders']) ? $h['image_borders'] : []" />
                            </div>
                        </div>
                        @php $hero_i++; @endphp
                    @endforeach
                </div>
            </div>
            <div class="hero__pagination hero__pagination_{{ count($hero) }} slider-pagination"></div>
        </div>
    </div>
    <div class="scroll-down">
        <a class="scroll-down__btn" title="arrow down">
            <img src="/assets/img/arrow-down.png" alt="arrow-down" />
        </a>
    </div>
    @include('front.breadcrumbs.breadcrumb-body')
@endif