@extends('layout/template')

@section('content')
    <div class="row" style="background-color: #607c89;min-height: calc(100vh - 400px);max-height: calc(100vh - 200px);padding-top:20px;">
        <div class="col-md-12" style="text-align: center;">
            <div>
                <div class="fotorama" data-nav="thumbs" data-keyboard="true" data-ratio="800/600" data-width="1200" data-maxheight="80%" data-allowfullscreen="true">
                    @foreach($images as $image)
                        <a href="/{{ $tenant->url }}/{{ $gallery->url }}/{{ $image->id }}/file?size=big" data-taken="{{ $image->DateTimeOriginal }}" data-description="{{ $image->description }}" data-name="{{ $image->name }}"><img src="/{{ $tenant->url }}/{{ $gallery->url }}/{{ $image->id }}/file?size=pixel"></a>
                    @endforeach
                </div>
            </div>

        </div>
    </div>
    <div class="row">
        <div class="col-md-2"></div>

        <div class="col-md-4 order-sm-12">
            <h1 id="filename"></h1>
            <i>Picture take <span id="taken"></span></i>
            <p id="description"></p>
        </div>
        <div class="col-md-4 order-sm-1">
            <h1>Gallery: <?php echo $gallery->name; ?></h1>
            <p><?php echo $gallery->html; ?></p>
        </div>
    </div>

@endsection

@section('js')
    <script>
        $('.fotorama').on('fotorama:show', function (e, fotorama) {
            console.log(e.type, fotorama.activeFrame);
            $("#filename").html(fotorama.activeFrame.name);
            $("#description").html(fotorama.activeFrame.description);
            $("#taken").html(fotorama.activeFrame.taken);
        });

    </script>
    <link  href="https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js"></script>
    <style type="text/css">
        .fotorama__wrap {
            margin: 0 auto;
        }

    </style>
@endsection