@extends('layouts.base')

@section('navigationBar')
    @parent
    @if($data->socialMedia)
        @include('layouts.partials.socialMedia')
    @endif
@endsection


@section('pageHeader')
    @if(isset($data->photo))
        @include('layouts.partials.photoHeader')
    @else
        @include('layouts.partials.mainHeader')
    @endif
@stop


@section('content-block1')
    <section class="content-block1 row ">
        @include('layouts.partials.contentblocks.breadcrumb')
        <div class="row colleagues-block">
            @foreach($data->multiData as $colleague)
                <div class="colleague-holder" id="colleague{{$colleague->colleague_id}}">
                    @if(isset($colleague->large_image_url))
                        <img alt="{{$colleague->name}}" src="{{$colleague->large_image_url}}"/>
                    @else
                        <img alt="{{$colleague->name}}" src="/images/structure/placeholder_person.png"/>
                    @endif

                    <p class="name">{{$colleague->name}} <span></span></p>
                </div>
            @endforeach
        </div>
        @if(isset($data->buttons))
            <div class="grid">
                @include('layouts.partials.contentblocks.buttonRow')
            </div>
        @endif
    </section>
    <div class="popUp">
        @foreach($data->multiData as $colleague)
            <div class="popup-holder" id="popUp-colleague{{$colleague->colleague_id}}">
                <span class="close"></span>
                <div class="middle-block row">
                    @if(isset($colleague->large_image_url))
                        <img alt="{{$colleague->name}}" class="above775" src="{{$colleague->large_image_url}}"/>
                    @endif


                    <div class="middle-placeholder">
                        <h2>{{$colleague->name}}</h2>
                        <h3>{{$colleague->specialty}}</h3>
                        @if(isset($colleague->large_image_url))
                            <img alt="{{$colleague->name}}" class="below775" src="{{$colleague->large_image_url}}"/>
                        @endif
                        {{$colleague->description}}
                    </div>
                </div>
                <div class="side-by-side-grid">
                    @include('layouts.partials.contentblocks.buttonRow')
                </div>
            </div>
        @endforeach
    </div>

@stop

@section('subContent')
    @include('layouts.partials.articles')
    @include('layouts.partials.sportsPurposeCircles')
@stop

@section('extraJavascript')
    <script src="/js/colleagues.js"></script>
@stop