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

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

            @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')
                                @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>

        </section>

        <section class="grid-col col-7 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>