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

@section('breadcrumb')
    <div class="breadcrumb">
        <div class="container">
            <ol class="breadcrumb">
                <li><a href="{{ route('home') }}">Gallery</a></li>
                <li class="active">{{ $album->name }}</li>
            </ol>
        </div>
    </div>
@endsection

@section('content')
    <div class="container album-container">
        <div class="row">
            <div class="col-xs-12">
                <h1 class="page-title">{{ $album->name }}</h1>
                <p>{{ $album->description }}</p>
                <hr/>
            </div>
        </div>

        <div class="row">
            @foreach ($photos as $photo)
                <div class="col-xs-12 col-sm-4 photo">
                    <div class="panel panel-default">
                        <div class="panel-body" style="padding: 4px;">
                            <a href="{{ $photo->url() }}"><img src="{{ $photo->thumbnailUrl('preview') }}" alt="" class="img-responsive img-rounded"/></a>
                        </div>
                        <div class="panel-footer"><b><a href="{{ $photo->url() }}">{{ $photo->name }}</a></b></div>
                    </div>
                </div>
            @endforeach
        </div>

        <div class="row" style="margin-top: 15px;">
            <div class="col-xs-12 text-center">
                {{ $photos->links() }}
            </div>
        </div>
    </div>
@endsection