@php
    $blockType = data_get($reduction, 'block_type.value');
    $position = data_get($reduction, 'position.value');
    $ctaUrl = data_get($reduction, 'cta_url.value');
    $ctaLabel = data_get($reduction, 'cta_label.value');
    $articleId = data_get($reduction, 'article_id.value');
    $reductionNews = $articleId ? \App\Models\News::find($articleId) : null;
    $visibility = data_get($reduction, 'visibility.value', true);
@endphp
<section class="position-relative bg-white-wood-big py-5 line-border-large" id="commitments-paragraph-with-visual-complex-flex-items">
    <div class="container">
        <div class="row">
            <div @class([
                'col-12 col-md-6',
                isset($picto) && !empty($picto) ? 'px-5 pt-5' : 'p-5',
            ])>
                <div class="position-relative pt-md-0 mx-auto my-5">
                    @if (isset($picto) && !empty($picto))
                        <img class="img-fluid position-absolute pictogram-reversed z-1" src="{{ $picto }}"
                            title="{{ $picto_title }}" alt="{{ $picto_alt }}">
                    @endif
                    <div class="d-flex justify-content-start align-items-start bottom-left-shadow">
                        <div class="line-border-small rotate-right w-100 m-lg-0 mx-auto h-fit bg-white p-2">
                            @if (isset($video_id) && !empty($video_id) && \App\Rules\IsValidVimeoId::validates($video_id))
                                <div class="ratio ratio-16x9">
                                    <div class="video-inlaid w-100 h-100" type="vimeo"
                                        href="https://player.vimeo.com/video/{{ $video_id }}?autoplay=0&loop=1&badge=0">
                                        <a class="cn-cookie-link" id="vimeo-warning" href="" rel="nofollow">
                                            <strong class="text-underline text-bold text-normal text-danger">
                                                {{ __('cookie-notice.custom.vimeo.warning') }}
                                            </strong>
                                        </a>
                                    </div>
                                </div>
                            @elseif (isset($video_id) && !empty($video_id) && \App\Rules\IsValidYoutubeId::validates($video_id))
                                <div class="ratio ratio-16x9">
                                    <div class="video-inlaid w-100 h-100" type="youtube"
                                        href="https://www.youtube.com/embed/{{ $video_id }}?autoplay=0&loop=1">
                                        <a class="cn-cookie-link" id="youtube-warning" href="" rel="nofollow">
                                            <strong class="text-underline text-bold text-normal text-danger">
                                                {{ __('cookie-notice.custom.youtube.warning') }}
                                            </strong>
                                        </a>
                                    </div>
                                </div>
                            @elseif (isset($picture) && !empty($picture))
                                <img class="img-fluid line-border-small w-100" src="{{ $picture }}"
                                    title="{{ $picture_title }}" alt="{{ $picture_alt }}">
                            @endif
                        </div>
                    </div>
                    @if (isset($card_title) && !empty($card_title))
                        <div class="custom-card bottom-left-shadow mt-md-0 z-1 mx-auto mt-5 w-fit">
                            <img class="position-absolute z-2" src="{{ $card_picto }}"
                                title="{{ $card_picto_title }}" alt="{{ $card_picto_alt }}">
                            <p
                                class="position-absolute text-light bg-secondary rotate-left h6 z-1 start-0 m-0 p-2 ps-5">
                                {{ $card_sustitle }}</p>
                            <div class="bg-tertiary line-border-small p-4 text-center">
                                <h2>{{ $card_title }}</h2>
                                <p class="h6 m-0">{{ $card_subtitle }}</p>
                                <p class="m-0">{{ $card_text }}</p>
                            </div>
                        </div>
                    @endif
                </div>
                <h2>{{ $title }}</h2>
                <p class="m-0">{!! $text !!}</p>
            </div>
            <div class="col-12 col-md-6 d-flex justify-content-center align-items-center">
                <div class="row d-flex justify-content-center align-items-start">
                    @foreach ($collection as $item)
                        <div
                            class="col-6 col-md-4 d-flex justify-content-center align-items-center flex-column p-3 text-center">
                            <div class="pictogram-content d-flex justify-content-center align-items-center">
                                <img class="img-fluid" src="{{ asset($item->picture) }}"
                                    title="{{ $item->picture_title }}" alt="{{ $item->picture_alt }}">
                            </div>
                            @if (isset($item->sustitle) && !empty($item->sustitle))
                                <p class="m-0">{{ $item->sustitle }}</p>
                            @endif
                            <p class="h6 m-0">{{ $item->title }}</p>
                            @if (isset($item->description) && !empty($item->description))
                                <p class="m-0">{{ $item->description }}</p>
                            @endif
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
        @if ($visibility)
            @include('fo.partials.block.reduction-card', [
                'news' => $reductionNews,
                'ctaUrl' => $ctaUrl ?? null,
                'ctaLabel' => $ctaLabel ?? null,
                'position' => $position,
                'blockType' => $blockType,
            ])
        @endif
    </div>
</section>