@extends('layouts.master', ['view' => 'photo-album'])

@section('meta')
    <title>{{ $photoAlbum->translation->name }} | {{ $page->translation->meta_title }}</title>
    <meta name="description" content="{{ $photoAlbum->translation->meta_description }}">

    @if(isset($photoAlbum->routeInOtherLanguages))
        @foreach($photoAlbum->routeInOtherLanguages as $routeInOtherLanguage)
            <link rel="alternate" hreflang="{{$routeInOtherLanguage->iso_2}}"
                  href="{{ \URL::to($routeInOtherLanguage->route->route) }}"/>
        @endforeach
    @endif

@endsection

@section('editable_content')

    <div class="image-wrapper">
        @include('layouts.partials.navigation')


        <div class="content-placeholder">

            {{-- Make extra block for the creative backgrounds in this design :p --}}
            <div class="background"></div>

            <div class="grid-row">
                <span class="right-icon styling"></span>

                {{-- Main content block --}}
                <div class="grid-col main col-10 offset-1">

                    {{-- Return link --}}
                    <div class="return-link">
                        <a href="/{{$page->translation->route->route}}">
                            {{ KommaLang::get('returnTo') }} ‘{{$page->translation->name}}’
                        </a>
                    </div>

                    <h1>{{ $photoAlbum->translation->name }}</h1>

                    @if(isset($photoAlbum->accessGranted) && $photoAlbum->accessGranted)

                        {{-- Images --}}
                        <div class="images">
                            @foreach($photoAlbum->images as $image)
                                @if($image->attribute_key == 'images')
                                    <a href="{{$image->large_image_url}}" data-lightbox="image-slider">
                                        <article class="image"
                                                 style="background-image: url('{{$image->medium_image_url}}');">
                                        </article>
                                    </a>
                                @endif
                            @endforeach
                        </div>

                    @else

                        <div class="password-form">
                            {{ Form::open() }}

                            <p>{{ KommaLang::get('photoAlbumProtected') }} <span class="icon"></span></p>

                            <div class="main-form">
                                {{ Form::label('password', trans('translations.password')) }}
                                {{ Form::password('password') }}

                                <div class="submit-button">{{ KommaLang::get('unlockPhotoAlbum') }}</div>
                                {{ Form::submit() }}
                            </div>
                            {{ Form::close() }}
                        </div>

                    @endif

                </div>

            </div>

        </div>
    </div>

    <div class="white-styling-block"></div>

    {{-- Relevant Pages --}}
    <div class="relevant-pages-container">
        <div class="grid-row">
            <div class="grid-col col-6 offset-1 placeholder">
                @include('layouts.partials.relevantPages')
            </div>
        </div>
    </div>

@endsection

@section('extra-js')
    <script src="/packages/lightbox/js/lightbox.min.js"></script>
    <link rel="stylesheet" href="/packages/lightbox/css/lightbox.min.css"/>
    <script>
        lightbox.option({
            'resizeDuration': 400,
            'albumLabel': 'Afbeelding %1 van de %2',
            'disableScrolling': true,
        });

        $(function () {
           $('.password-form .submit-button').click(function () {
               $('.password-form form').submit();
           }) ;
        });
    </script>
@endsection