<?php
global $objPage;
$cssClasses = array(
  'hero-wrapper',
  'hero-wrapper_'.$this->id,
  $this->class,
);
if ($this->colorVariation) {
  $cssClasses[] = $this->colorVariation;
}
if ($this->textPosition) {
  $cssClasses[] = $this->textPosition;
}
if ($this->showArrow) {
  $cssClasses[] = '-arrow';
}
if ($this->arrowAlternate) {
  $cssClasses[] = '-arrow-alternate';
}
if ($this->height) {
    $cssClasses[] = $this->height;
}

$imageFiles = array();
$videoFiles = array();
if (is_array($this->backgroundImage)) {
  foreach (\FilesModel::findMultipleByUuids($this->backgroundImage) as $file) {
    if (in_array(
      $file->extension,
      array_map('trim', explode(',', \Config::get('validImageTypes')))
    )) {
      $imageFiles[] = $file;
    }
    else {
      $videoFiles[] = $file;
    }
  }
}
$backgroundStyle = '';
if (count($imageFiles) && $image = $this->getImageObject($imageFiles[0]->uuid, $this->backgroundImageSize)) {
  $minHeight = round(100/$image->arrSize[0]*$image->arrSize[1]).'%';
  $backgroundStyle .= 'background-image: url("' . $image->src . '");';
}
if (count($videoFiles))
{
  $objPage->cssClass = trim($objPage->cssClass . ' -hide-logo');
}
if ((count($imageFiles) || count($videoFiles)) && $this->backgroundSize) {
  $backgroundStyle .= 'background-size: ' . $this->backgroundSize . ';';
}
if ((count($imageFiles) || count($videoFiles)) && $this->backgroundPosition) {
  $backgroundStyle .= 'background-position: ' . $this->backgroundPosition . ';';
}

?>

<?php $this->block('content'); ?>
<div class="<?php echo implode(' ', $cssClasses) ?>"<?php echo $this->cssID ?>>
<?php if (count($videoFiles)): ?>
  <div class="hero-background video_container">
    <div class="responsive<?= $this->playerAspect ? ' ratio-'.str_replace(':','',$this->playerAspect) : '' ?>">
    <video class="no-mejs" autoplay muted loop playsinline<?php if (count($imageFiles) && $image = $this->getImageObject($imageFiles[0]->uuid, $this->backgroundImageSize)): ?> poster="<?php echo $image->src ?>"<?php endif ?>>
      <?php foreach ($videoFiles as $video): ?>
        <source src="<?php echo TL_FILES_URL . $video->path ?>" type="video/<?php echo $video->extension ?>">
      <?php endforeach ?>
      <?php if (count($imageFiles) && $image = $this->getImageObject($imageFiles[0]->uuid, $this->backgroundImageSize)): ?>
        <?php $this->insert('picture_default', $image->picture) ?>
      <?php endif ?>
    </video>
    </div>
  </div>
<?php elseif (count($imageFiles) && $image = $this->getImageObject($imageFiles[0]->uuid, $this->backgroundImageSize)): ?>
  <div class="hero-background" style="<?php echo htmlspecialchars($backgroundStyle) ?>" data-image-url="<?php echo $image->src ?>"></div>
<?php endif ?>

<div class="content-wrapper hero-content">
  <?php if ($this->text['value']): ?>
  <<?= $this->text['unit'] ?> class="hero-text">
    <?= $this->text['value'] ?>
  </<?= $this->text['unit'] ?>>
  <?php endif; ?>
</div>

<?php if ($this->showArrow): ?>
  <svg class="arrow" xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 100 5' preserveAspectRatio='viewPort' ><polygon points="0,0 0,5 50,5 100,5 100,0 50,5" /></svg>
<?php endif; ?>


<?php if ($minHeight): ?>
  <style>.hero-wrapper_<?= $this->id ?>:before { content: ""; display: table; padding-top: <?= $minHeight ?>; float: left; }</style>
<?php endif; ?>
</div>
<?php $this->endblock(); ?>