<section class="photo-header">

    <svg class="dots" width="69" height="110">
        <use href="/img/dots.svg#dots"></use>
    </svg>

    <div class="grid-row">
        <div class="text-wrapper">
            @include('site.partials.breadcrumb')



            @if($model->code_name === 'vacancies')
                <h1>
                    @lang('site/global.workAt')<br/>
                    {{ config('site.'.\App::getSite()->slug.'.name') }}?
                </h1>
            @else
                <h1>{{$model->translation->name}}</h1>
            @endif

            @if (isset($showLogo) && $showLogo === true)
                <ul class="companies-list companies-list__detail">
                    <li class="{{$model->code_name}} companies-list__detail-item">
                        <a class="company-detail-item__link">
                            <div class="company-wrapper">
                                <div class="icon-placeholder">
                                    <div class="icon"></div>
                                </div>
                            </div>
                        </a>
                    </li>
                </ul>
            @endif


            @if(\App::getSite()->slug === 'anvil')
                @if ($model->code_name === 'group')
                    <p style="font-size: 1rem; line-height: 30px">
                        @lang('site/group.intro_1')
                        @lang('site/group.intro_2')
                    </p>
                @endif

                {{-- $model->sites[0]->slug --}}
                <div class="vacancy-header">
                    @if(isset($model->sites) && count($model->sites) > 0 && $model->sites[0]->slug !== "vdb-machinefabriek")
                        <img class="vacancy-header__logo" src="/img/logos/logo-{{$model->sites[0]->slug}}.svg"
                             alt="{{$model->sites[0]->name}}">
                    @endif
                </div>
            @endif
        </div>

        @if(isset($model->images))
            <div id="header-image-slider">
                <div class="placeholder">
                    @foreach($model->images as $key => $image)
                        <figure class="image @if($loop->first) active @endif" data-order="{{$key}}">
                            @foreach(['large', 'medium', 'small'] as $size)
                                <span class="{{$size}} size"
                                      style="background-image: url('{{ $image->{$size.'_image_url'} }}');"></span>
                            @endforeach
                        </figure>
                    @endforeach
                </div>
                <div class="slider-navigation-labels">
                    @if(isset($model->code_name))
                        <div class="caption">
                            @foreach($model->images as $key => $image)
                                <p class="@if($loop->first) active @endif"
                                   data-order="{{$key}}">
                                    @if(\Lang::has('site/caption.'.\App::getSite()->slug.'.'.$model->code_name.'.'.$key))
                                        @lang('site/caption.'.\App::getSite()->slug.'.'.$model->code_name.'.'.$key)
                                    @endif
                                </p>
                            @endforeach
                        </div>
                    @endif
                    @if($model->images->count() > 1)
                        <div class="navigation">
                            @foreach($model->images as $key => $image)
                                <span class="@if($loop->first) active @endif" data-order="{{$key}}"></span>
                            @endforeach
                        </div>
                    @endif
                </div>
            </div>
        @endif

    </div>
</section>