<!-- HEADER -->
<div class="header header-eventos">
  <div class="left">
    <a href="<?php echo lang_url('/'); ?>" class="home">
      <img src="<?php echo 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="<?php echo 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="<?php echo 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="<?php echo 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="<?php echo e($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="<?php echo e(!empty($areaEvent) ? implode(",", $areaEvent) : ''); ?>" name="tema" id="tema">
                <div class="panel-content">
                  <h3>Temas</h3>
                  <div class="themes-picker js-theme-picker" >
                    <?php if(!empty($areas)): ?>
                      <?php foreach($areas as $area): ?>
                        <?php
                        $areaAux = getAreaIcon($area->title);
                        ?>
                        <div class="js-tipso <?php echo $areaAux; ?> <?php echo in_array($area->id, $areaEvent) ? 'selected' : ''; ?>" data-tipso-position= "bottom" data-tipso="<?php echo e($area->title); ?>" data-id="<?php echo e($area->id); ?>">
                          <img class="inject-me" src="<?php echo Config::get('path.frontend.img'); ?>/icons/<?php echo $areaAux; ?>.svg">
                        </div>
                      <?php endforeach; ?>
                    <?php 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 <?php echo in_array('image', $eventType) ? 'active' : ''; ?>" data-type="image" data-tipso-position= "bottom" data-tipso="Fotografia">
                      <img class="inject-me" src="<?php echo Config::get('path.frontend.img'); ?>/icons/photograph.svg">
                    </div>
                    <div class="search-panel-option js-tipso js-option-filter <?php echo in_array('video', $eventType) ? 'active' : ''; ?>" data-type="video" data-tipso-position= "bottom" data-tipso="Vídeo">
                      <img class="inject-me" src="<?php echo Config::get('path.frontend.img'); ?>/icons/right-arrow.svg">
                    </div>
                    <div class="search-panel-option js-tipso js-option-filter <?php echo in_array('audio', $eventType) ? 'active' : ''; ?>" data-type="audio" data-tipso-position= "bottom" data-tipso="Áudio">
                      <img class="inject-me" src="<?php echo 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="<?php echo e(!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">
                      <?php if(!empty($activePerson)): ?>
                          <?php if(!empty($activePerson->image_id)): ?>
                          <div class="selected js-tipso" data-tipso="<?php echo e($activePerson->title); ?>" data-id="<?php echo e($activePerson->id); ?>">
                            <img src="<?php echo getMediaUrl($activePerson->image->filename);; ?>">
                          </div>
                          <?php else: ?>
                          <div class="selected js-tipso" data-tipso="<?php echo e($activePerson->title); ?>" data-id="<?php echo e($activePerson->id); ?>">
                            <img src="<?php echo Config::get('path.frontend.img'); ?>/intro/personalities/person1.jpg">
                          </div>
                          <?php endif; ?>
                      <?php endif; ?>
                      <?php if(!empty($people)): ?>
                        <?php foreach($people as $person): ?>
                            <?php if(!empty($person->image_id)): ?>
                              <div class="js-tipso" data-tipso="<?php echo e($person->title); ?>" data-id="<?php echo e($person->id); ?>">
                                <img src="<?php echo getMediaUrl($person->image->filename);; ?>">
                              </div>
                            <?php else: ?>
                              <div class="js-tipso" data-tipso="<?php echo e($person->title); ?>" data-id="<?php echo e($person->id); ?>">
                                <img src="<?php echo Config::get('path.frontend.img'); ?>/intro/personalities/person1.jpg">
                              </div>
                            <?php endif; ?>
                        <?php endforeach; ?>
                      <?php 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="<?php echo 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="<?php echo e($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="<?php echo e($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 = <?php echo $locations->toJson();; ?>;
                              <?php if(!empty($locationID)): ?>
                                var locations_current_id = <?php echo $locationID;; ?>;
                      <?php endif; ?>
                    </script>
                    <?php if(!empty($locations)): ?>
                      <select class="js-select-locations" name="local" id="local" data-active-id="<?php echo $locationID; ?>">
                        <option value="">Todas</option>
                      </select>
                    <?php 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>