@extends('layouts.master')

@section('content')

    <div class="album-header">

        <div class="grid-container">

            <div class="album-top">

                {{-- Title --}}
                <h1>{{ $album->name }}</h1>

                {{-- Counter --}}
                <div class="counter">
                    1 / {{ count($album->images) }}
                </div>
            </div>
            <div class="album-top-navigation-row">
                <a class="back" href="/{{ $page->route }}">Terug naar overzicht</a>

                <div class="navigation">
                    <span class="prev" id="prev">Vorige</span> /
                    <span class="next" id="next">Volgende</span>
                </div>
            </div>
        </div>

        <div class="grid-album-container">


            <div class="fixable-container">
                <div class="fixable-wrapper">

                    <div class="swiper-container swiper-resize">
                        <div class="swiper-wrapper">

                            @foreach($album->images as $image)

                                <div class="swiper-slide">
                                    <img class="image fit preload" src="{{ $image->large_image_url }}" alt="{{ $album->name }}"/>
                                </div>

                            @endforeach
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <div class="white-space-row"></div>
    </div>

    <div class="album-info">

        {{-- White space above --}}
        <div class="white-space-row h-100 overlay-bottom"></div>

        {{-- mid-section --}}
        <div class="grid-container">

            {{-- Background left-side from mid-section --}}
            <div class="background left-outer-background"></div>

            {{-- Left column containing the smile --}}
            <div class="column-7 transparent-smile-holder">
                <div class="transparent-smile"></div>
            </div>

            {{-- Left column containing the info --}}
            <div class="column-7 content">

                <span class="title">{{ $album->name }}</span>
                <span class="intro">{{ $album->description }}</span><br />
                <br />
                <a class="button @if(!empty($negative)) black @endif arrow back" href="/{{ $page->route }}">Terug</a>

            </div>

            {{-- Background right-side from mid-section --}}
            <div class="background right-inner-background"></div>

            {{-- Background right-side from mid-section --}}
            <div class="background right-outer-background"></div>

        </div>

        {{-- White space below --}}
        <div class="white-space-row h-150 overlay-top"></div>

    </div>

@stop