@extends(Theme::viewName('layout'))
@section('title', $label->name)

@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('home') }}"><i class="fa fa-fw fa-home"></i></a></li>
    <li class="breadcrumb-item">{{ $label->name }}</li>
@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">{{ $label->name }}</h1>
            <p>@lang('gallery.label_intro', ['name' => $label->name])</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>
</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