@extends('themes.base.layout')
@section('title', $album->name)

@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('home') }}"><i class="fa fa-fw fa-home"></i></a></li>
    @include(Theme::viewName('partials.album_breadcrumb'))
@endsection

@section('content')
<div class="container album-container album-slideshow-container" id="slideshow-container">
    <div class="row">
        <div class="col">
            <div class="pull-right">
                @include(\App\Facade\Theme::viewName('partials.album_view_selector'))
            </div>

            <h1 class="page-title">{{ $album->name }}</h1>
            <p>{{ $album->description }}</p>
            <div class="clearfix"><!-- --></div>
            <hr/>
        </div>
    </div>

    <div class="row">
        <div class="col text-center">
            <div class="pull-right">
                <div class="btn btn-group">
                    <button class="btn btn-secondary" v-on:click="pauseSlideshow" v-bind:disabled="isPaused" v-if="isRunning"><i class="fa fa-fw fa-pause"></i></button>
                    <button class="btn btn-secondary" v-on:click="continueSlideshow" v-bind:disabled="!isPaused" v-if="isRunning"><i class="fa fa-fw fa-play"></i></button>
                </div>
            </div>

            <div id="image-preview" v-if="current !== null">
                <a v-bind:href="current.info_url" v-bind:title="current.description">
                    <img class="rounded thumbnail" v-bind:src="current.original_url" v-bind:alt="current.name" v-bind:title="current.description"/>
                </a>
            </div>
        </div>
    </div>

    <div class="row" style="margin-top: 15px;">
        <div class="col">
            <div class="thumbnails">
                @foreach ($photos as $photo)
                    <a href="{{ $photo->url() }}" v-on:click="changeCurrentImage({{ $photo->id }}); $event.preventDefault();">
                        <img class="ss-thumbnail rounded" src="{{ $photo->thumbnailUrl('slideshow-tiny') }}" alt="{{ $photo->name }}" title="{{ $photo->description }}" data-photo-id="{{ $photo->id }}" data-original-url="{{ $photo->thumbnailUrl('fullsize') }}" data-info-url="{{ $photo->url() }}" />
                    </a>
                @endforeach
            </div>
        </div>
    </div>

    @if ($album->children()->count() > 0)
        <h2 style="margin-top: 60px;"><small class="text-muted">@lang('gallery.other_albums_heading', ['album_name' => $album->name])</small></h2>
        <p class="mb-4">@lang('gallery.other_albums_description')</p>

        <div class="row">
            @foreach ($album->children as $childAlbum)
                <div class="col-sm-4 col-md-3" style="max-width: 250px;">
                    <div class="card mb-3">
                        <img class="card-img-top" src="{{ $childAlbum->thumbnailUrl('preview') }}" style="max-height: 120px;"/>
                        <div class="card-block">
                            <h5 class="card-title"><a href="{{ $childAlbum->url() }}">{{ $childAlbum->name }}</a></h5>
                        </div>
                        <div class="card-footer">
                            <small class="text-muted"><i class="fa fa-fw fa-photo"></i> {{ $childAlbum->photos_count }} photos</small>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    @endif
</div>
@endsection

@push('scripts')
<script type="text/javascript">
    // TODO make this timeout configurable
    var viewModel = new SlideShowViewModel(5000);

    $(document).ready(function() {
        $('img.ss-thumbnail').each(function(index, element)
        {
            viewModel.data.images.push({
                'id': $(element).data('photo-id'),
                'name': $(element).attr('alt'),
                'description': $(element).attr('title'),
                'original_url': $(element).data('original-url'),
                'info_url': $(element).data('info-url')
            });
        });

        var app = new Vue(viewModel);
        app.startSlideshow();
    });
</script>
@endpush