@extends('layouts.site');

@section('content');
<section class="padrao-internas" style="background: #fff; padding: 40px 0px;">
    <div class="container">
        <div class="row">
            <div class="col-12 col-md-12">
                <div class="box-internas">
                    <h1 class="titulo-internas">{{ $title }}</h1>

                    <div id="galeria-album" class="row" data-toggle=”modal” data-target=”#modal”>
                        @foreach ($imagens as $key => $value)
                        <div class="col-sm-3">
                            <figure>
                                <a href="https://farm{{$value['farm']}}.staticflickr.com/{{$value['server']}}/{{$value['id']}}_{{$value['secret'] }}_b.jpg" class="img-album"
                                data-toggle="modal" data-target="#modalImagem"
                                data-image-url="https://farm{{$value['farm']}}.staticflickr.com/{{$value['server']}}/{{$value['id']}}_{{$value['secret'] }}_b.jpg"><!--Capa album-->
                                    <img src="https://farm{{ $value['farm'] }}.staticflickr.com/{{ $value['server'] }}/{{ $value['id'] }}_{{ $value['secret'] }}_n.jpg&w=320&h=210" alt="" class="img-fluid">
                                </a><!--Fim Capa album-->
                            </figure>

                        </div>
                        @endforeach
                    </div>

                    {{$imagens->links()}}
                    
                    <!-- Modal -->
                    <div class="modal fade" id="modalImagem" tabindex="-1" role="dialog" aria-labelledby="modalLabel"
                        aria-hidden="true">
                        <div class="modal-dialog modal-lg" role="document">
                            <div class="modal-content">
                            <div class="modal-header">
                                    <h5 style="color: #003869; font-weight: bold;" class="modal-title">XXIII Marcha a Brasília </h5>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                                <div class="modal-body d-flex justify-content-center">
                                    <img id="modal-image" class="modal-image modal-imagem-galeria" src="">
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</section>

@endsection