<!-- HEADER -->
<div class="header header-eventos">
  <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">
    <div class="close">
      <div class="top"></div>
      <div class="bottom"></div>
    </div>
  </div>
</div>
<div class="search-eventos-wrapper">
  <div class="search-eventos-content">
    <div class="menu-positioning-div">
      <div class="search-panel">
        <form method="get" action="eventos" id="search-events-form">
          <div class="mobile-screen-container js-mobile-panel">
            <div class="md-screen-container">
              <div class="panel search-input-panel">
                <div class="panel-content">
                  <div class="search-input-container">
                    <input autocomplete="off" class="search-events-input" type="text" value="{{{$searchString}}}" name="search_for" id="search_for" placeholder="Pesquise aqui textos, fotografias, vídeos...">
                    <button type="submit" class="js-search-events-btn"></button>
                  </div>
                  <div class="blue-down-arrow js-options-toggle"></div>
                </div>
              </div>
              <div class="panel search-themes-panel">
                <input autocomplete="off" type="hidden" value="{{{!empty($areaEvent) ? implode(",", $areaEvent) : ''}}}" name="tema" id="tema">
                <div class="panel-content">
                  <h3>Temas</h3>
                  <div class="themes-picker js-theme-picker" >
                    @if(!empty($areas))
                      @foreach($areas as $area)
                        <?php
                        $areaAux = getAreaIcon($area->title);
                        ?>
                        <div class="js-tipso {{$areaAux}} {{in_array($area->id, $areaEvent) ? 'selected' : ''}}" data-tipso-position= "bottom" data-tipso="{{{$area->title}}}" data-id="{{{$area->id}}}">
                          <img class="inject-me" src="{{ Config::get('path.frontend.img') }}/icons/{{$areaAux}}.svg">
                        </div>
                      @endforeach
                    @endif
                  </div>
                </div>
              </div>
              <div class="panel panel-content-filters">
                <div class="panel-content">
                  <h3>Por media</h3>
                  <div class="panel-body media-picker">
                    <input autocomplete="off" type="hidden" value="" name="event_type" id="event_type">
                    <div class="search-panel-option js-tipso js-option-filter {{in_array('image', $eventType) ? 'active' : ''}}" data-type="image" data-tipso-position= "bottom" data-tipso="Fotografia">
                      <img class="inject-me" src="{{ Config::get('path.frontend.img') }}/icons/photograph.svg">
                    </div>
                    <div class="search-panel-option js-tipso js-option-filter {{in_array('video', $eventType) ? 'active' : ''}}" data-type="video" data-tipso-position= "bottom" data-tipso="Vídeo">
                      <img class="inject-me" src="{{ Config::get('path.frontend.img') }}/icons/right-arrow.svg">
                    </div>
                    <div class="search-panel-option js-tipso js-option-filter {{in_array('audio', $eventType) ? 'active' : ''}}" data-type="audio" data-tipso-position= "bottom" data-tipso="Áudio">
                      <img class="inject-me" src="{{ Config::get('path.frontend.img') }}/icons/audio.svg">
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="md-screen-container">
              <div class="panel personalities-panel">
                <input autocomplete="off" type="hidden" value="{{{!empty($activePerson) ? $activePerson->id : ''}}}" name="personalidade" id="personalidade">
                <div class="panel-content">
                  <h3>Personalidades</h3>
                  <div class="panel-body">
                    <div class="personalities-picker active open js-personalities-picker">
                      @if(!empty($activePerson))
                          @if(!empty($activePerson->image_id))
                          <div class="selected js-tipso" data-tipso="{{{$activePerson->title}}}" data-id="{{{$activePerson->id}}}">
                            <img src="{{ getMediaUrl($activePerson->image->filename);}}">
                          </div>
                          @else
                          <div class="selected js-tipso" data-tipso="{{{$activePerson->title}}}" data-id="{{{$activePerson->id}}}">
                            <img src="{{ Config::get('path.frontend.img') }}/intro/personalities/person1.jpg">
                          </div>
                          @endif
                      @endif
                      @if(!empty($people))
                        @foreach($people as $person)
                            @if(!empty($person->image_id))
                              <div class="js-tipso" data-tipso="{{{$person->title}}}" data-id="{{{$person->id}}}">
                                <img src="{{ getMediaUrl($person->image->filename);}}">
                              </div>
                            @else
                              <div class="js-tipso" data-tipso="{{{$person->title}}}" data-id="{{{$person->id}}}">
                                <img src="{{ Config::get('path.frontend.img') }}/intro/personalities/person1.jpg">
                              </div>
                            @endif
                        @endforeach
                      @endif
                    </div>
                    <div class="personalities-input-container js-personalities-input-container">
                      <input autocomplete="off" id="search-personality" placeholder="Pesquise personalidades" name="search-personality" type="text">
                    </div>
                    <a href="#" class="js-more-personalities">
                      <img class="active open" src="{{ Config::get('path.frontend.img') }}/icons/magnifier_blue.svg">
                      <div class="close">
                        <div class="top"></div>
                        <div class="bottom"></div>
                      </div>
                    </a>
                  </div>
                </div>
              </div>
              <div class="panel input-panel">
                <div class="panel-content">
                  <label>Data de Início</label>
                  <input autocomplete="off" class="date-input js-data-inicio" id="data_inicio" placeholder="aaaa-mm-dd" value="{{{$dateStart != '' ? $dateStart : '1960-01-01'}}}" name="data_inicio" type="text">
                </div>
                <div class="panel-content">
                  <label>Data de Fim</label>
                  <input autocomplete="off" class="date-input js-data-fim" id="data_fim" placeholder="aaaa-mm-dd" value="{{{$dateEnd != '' ? $dateEnd : '2020-12-31'}}}" name="data_fim" type="text">
                </div>
              </div>
              <div class="panel input-panel">
                <div class="panel-content">
                  <label>Local</label>
                  <div class="input-container">
                    <script type="text/javascript">
                      var locations = {{ $locations->toJson(); }};
                              @if(!empty($locationID))
                                var locations_current_id = {{$locationID;}};
                      @endif
                    </script>
                    @if(!empty($locations))
                      <select class="js-select-locations" name="local" id="local" data-active-id="{{$locationID}}">
                        <option value="">Todas</option>
                      </select>
                    @endif
                  </div>
                </div>
              </div>
              <div class="panel input-panel">
                <button type="submit" class="js-search-events-btn">
                  <span>ok</span>
                </button>
                <div class="clear-button js-clear">
                  <span>Limpar<br>Pesquisa</span>
                </div>
              </div>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>