@extends('frontend.main.main', array('metaData' => $eventMetaData))
@section('content')

    <div class="slideshow">
        
        <div class="header header-eventos header-carousel">
          <div class="left">
            <a href="{{lang_url('/')}}" class="home">
              <img src="{{ Config::get('path.frontend.img') }}/icons/home.svg" alt="ffms_logo">
            </a>
            <a class="ffms" href="https://www.ffms.pt/" target="_blank">
              <img class="inject-me" src="{{ Config::get('path.frontend.img') }}/intro/ffms_logo.svg" alt="ffms_logo">
            </a>
            <a class="rtp" href="http://www.rtp.pt/homepage/" target="_blank">
              <img class="inject-me" src="{{ Config::get('path.frontend.img') }}/intro/rtp_logo.svg" alt="rtp_logo">
            </a>
            <a class="circuloleitores" href="https://www.circuloleitores.pt/" target="_blank">
              <img class="inject-me" src="{{ Config::get('path.frontend.img') }}/intro/circuloleitores.svg" alt="circuloleitores">
            </a>
          </div>
        </div>

        <div class="row carousel-title">
            <div class="col s12 offset-s1 l3 offset-l9">
                <h2><span>Imagens da</span><br>pandemia</h2>
            </div>
        </div>
        <div class="arrow-container">
            <div class="left arrow" id="left-arrow"><img src="assets/img/slideshow/left.svg" width="61" height="32"></div>
            <div class="right arrow" id="right-arrow"><img src="assets/img/slideshow/right.svg" width="61" height="32"></div>
        </div>

        <div class="carousel-container">
            <div class="carousel">

                @foreach($slideshow as $slide)
                <a class="carousel-item" id="slide-{{ $slide->id }}" data-number="{{ $slide->case_numbers }}" data-photographer="{{{ $slide->photographer }}}" data-date="{{ $slide->date }}" data-description="{{{ $slide->description }}}" data-img="{{ $slide->slide_image["1500x1000"] }}" href="#"><img src="{{ $slide->slide_image["768x512"] }}"></a> {{-- 852x567 1500x1000 768x512 --}}
                @endforeach

            </div>
        </div>

        <div id="carousel-info">
            <div class="row">
                <div class="col s5 m4 l2 offset-l6 carousel-col-left">
                    <div id="carousel-number" class="carousel-number right-align">
                        2302
                    </div>
                    <div id="carousel-cases" class="carousel-cases right-align">
                        Casos
                    </div>
                </div>
                <div class="col s6 m7 l4 carousel-col-right">
                    <img src="assets/img/slideshow/view.svg" width="27" height="27" id="view-btn" data-id="" />
                    <div id="carousel-date" class="carousel-date">
                        10 de Janeiro 2020
                    </div>
                    <div id="carousel-photographer" class="carousel-photographer">
                        Nome do fotografo
                    </div>
                    <div id="carousel-description">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
                    </div>
                </div>
            </div>
        </div>


        <div id="modal" class="modal">
            <div class="modal-content">
                <div class="header header-eventos header-carousel">
                  <div class="left">
                    <a href="{{lang_url('/')}}" class="home">
                      <img src="{{ Config::get('path.frontend.img') }}/icons/home.svg" alt="ffms_logo">
                    </a>
                    <a class="ffms" href="https://www.ffms.pt/" target="_blank">
                      <img class="inject-me" src="{{ Config::get('path.frontend.img') }}/intro/ffms_logo.svg" alt="ffms_logo">
                    </a>
                    <a class="rtp" href="http://www.rtp.pt/homepage/" target="_blank">
                      <img class="inject-me" src="{{ Config::get('path.frontend.img') }}/intro/rtp_logo.svg" alt="rtp_logo">
                    </a>
                    <a class="circuloleitores" href="https://www.circuloleitores.pt/" target="_blank">
                      <img class="inject-me" src="{{ Config::get('path.frontend.img') }}/intro/circuloleitores.svg" alt="circuloleitores">
                    </a>
                  </div>
                  {{-- <div class="right">
                      <a href="#" class="right" id="close-btn">
                          <img src="assets/img/slideshow/close.svg" width="27" height="27" id="" data-id="" />
                      </a>
                    </div> --}}
                </div>

                
                      <a href="#" class="right" id="close-btn">
                          <img src="assets/img/slideshow/close.svg" width="27" height="27" id="" data-id="" />
                      </a>

                <div class="row flex">
                    <div class="col s12 m12 l9 px-0">
                        <img id="carousel-img-slideshow" class="responsive-img" src="" alt="">
                    </div>
                    <div class="col s12 m12 l3 carousel-info">
                        <div>
                            <div id="carousel-number-slideshow" class="carousel-number">
                                2302
                            </div>
                            <div id="carousel-cases-slideshow" class="carousel-cases">
                                Casos
                            </div>
                            <div id="carousel-date-slideshow" class="carousel-date">
                                10 de Janeiro 2020
                            </div>
                            <div id="carousel-photographer-slideshow" class="carousel-photographer">
                                Nome do fotografo
                            </div>
                            <div id="carousel-description-slideshow" class="carousel-description">
                                Nome do fotografo
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="slideshow-search">
        @include('frontend.partials.eventos.form')
    </div>
    @if(count($events->getCollection()) > 0)
        @include('frontend.partials.eventos.results')
    @else
        @include('frontend.partials.eventos.no-results')
    @endif
    @include('frontend.partials.modal.glossario')
    @include('frontend.partials.eventos.modal')
    @include('frontend.partials.modal.bibliografia')
    @include('frontend.partials.eventos.scripts')
@stop