<div class="reasons-row" id="reasons">

    <div class="vertical-swoosh"></div>

    <div class="grid-row">
        <section class="grid-col col-5 offset-1 reasons-block">

            <div class="reasons-wrapper">

                @if(isset($title) && $title != '')
                    <h2>{!! $title !!}</h2>
                @endif

                <ul class="{{ $listIcons or 'arrows' }}">
                    @if(isset($reasons) && sizeof($reasons) != 0)
                        @foreach($reasons as $reason)
                            <li>
                            <span class="list-icon">
                                @if(isset($listIcons) && $listIcons == 'thumbs')
                                    @include('site.svg.thumb')
                                @elseif(isset($listIcons) && $listIcons == 'numbers')
                                    {{ $loop->iteration }}.
                                @endif
                            </span>
                                <p>{!! $reason !!}</p>
                            </li>
                        @endforeach
                    @else
                        <li><strong>Geef redenen aan in pagina instellingen</strong></li>
                    @endif
                </ul>

{{--                <div class="trigger">--}}
{{--                    @include('site.partials.small.button', ['hideShadow' => true])--}}
{{--                </div>--}}

            </div>

        </section>

        <section
                class="grid-col col-6 right-side @if(isset($rightSide) && $rightSide->typeSlug == 'full-image-block') absolute @endif">

            @if(isset($rightSide))

                @switch($rightSide->typeSlug)

                    @case('video-block')
                    <div class="video-block">
                        @if($rightSide->typeName != '')
                            <h4>{{ $rightSide->typeName }}</h4>
                        @endif
                        <div class="video-wrapper">
                            <div class="placeholder">
                                <div class="youtube-player" id="ytplayer"
                                     data-auto-play="@if($rightSide->autoPlay === true){{ 1 }}@else{{ 0 }}@endif"
                                     data-youtube-link="{{$rightSide->youtube}}">
                                    @if($rightSide->youtube == '')
                                        Vul youtube url in
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                    @break

                    @case('full-image-block')
                    <div class="image-block">
                        @if(isset($rightSide->images[0]))
                            <span style="background-image: url('{{$rightSide->images[0]['large']}}');"></span>
                            <picture>
                                <source media="(max-width:425px)"
                                        srcset="{{$rightSide->images[0]['small']}}">
                                <source media="(max-width:800px)"
                                        srcset="{{$rightSide->images[0]['medium']}}">
                                <img src="{{$rightSide->images[0]['large']}}"
                                     alt="image">
                            </picture>
                        @endif

                    </div>
                    @break

                    @default
                    <p>Voor dit dynamic blok '{{$rightSide->typeSlug}}' is nog geen ondersteuning</p>
                    @break

                @endswitch
            @else
                <p>
                    Maak een dynamic block aan met 'reasonsRow', dit kan zowel een:<br/>
                    - Video block<br/>
                    - 100% Afbeelding
                </p>
            @endif

        </section>
    </div>
</div>