<div class="large-header-image" id="large-header-image">

    <div class="grid-row">
        @if($slider)
            <div id="image-slider-home" class="image-slider header-image">
                <div class="placeholder">
                    @for($i = 0; $i < $sliderAmount; $i++)
                        <figure data-order="{{$i}}" class="image-placeholder">
                            <picture>
                                <source media="(max-width: 470px)"
                                        srcset="/img/{{$pageFolder or 'home'}}/header-image-{{$i}}-450.jpg">
                                <source media="(max-width: 620px)"
                                        srcset="/img/{{$pageFolder or 'home'}}/header-image-{{$i}}-600.jpg">
                                <source media="(max-width: 875px)"
                                        srcset="/img/{{$pageFolder or 'home'}}/header-image-{{$i}}@0,5x.jpg">
                                <source media="(max-width: 1300px)"
                                        srcset="/img/{{$pageFolder or 'home'}}/header-image-{{$i}}@0,75x.jpg">
                                <img src="/img/{{$pageFolder or 'home'}}/header-image-{{$i}}.jpg"
                                     alt="impression">
                            </picture>
                        </figure>
                    @endfor

                    <div class="controllers">
                        <div class="nav-item previous"
                             data-order="{{( $sliderAmount - 1)}}">
                            <span>@include('site.svg.arrow')</span>
                        </div>

                        <div class="nav-item next" data-order="1">
                            <span>@include('site.svg.arrow')</span>
                        </div>
                    </div>
                </div>
            </div>
        @else
            <figure class="header-image">
                <picture>
                    <source media="(max-width: 470px)"
                            srcset="/img/{{$pageFolder or 'home'}}/header-image-450.jpg">
                    <source media="(max-width: 620px)"
                            srcset="/img/{{$pageFolder or 'home'}}/header-image-600.jpg">
                    <source media="(max-width: 875px)"
                            srcset="/img/{{$pageFolder or 'home'}}/header-image@0,5x.jpg">
                    <source media="(max-width: 1300px)"
                            srcset="/img/{{$pageFolder or 'home'}}/header-image@0,75x.jpg">
                    <img src="/img/{{$pageFolder or 'home'}}/header-image.jpg"
                         alt="impression">
                </picture>
                @if(isset($caption))
                    <figcaption>
                    <span>
                        {!! str_replace('<br/>', "</span><br/><span>", $caption) !!}
                    </span>
                    </figcaption>
                @endif
            </figure>
        @endif

        <a class="show-scroll scroll-to-target" href="#{{$targetId or 'reasons'}}">
            <span class="arrow">
                @include('site.svg.arrow')
            </span>
        </a>
    </div>
</div>