<?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)) {
  if (($files = \FilesModel::findMultipleByUuids($this->backgroundImage)) !== null)
  {
    foreach ($files 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($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)): ?>
  <?php /*<div class="hero-background<?= $this->playerAspect ? ' ratio-'.str_replace(':','',$this->playerAspect) : '' ?>" style="<?php echo htmlspecialchars($backgroundStyle) ?>" data-image-url="<?php echo $image->src ?>"></div>*/ ?>
  <figure class="hero-background<?= $this->playerAspect ? ' ratio-'.str_replace(':','',$this->playerAspect) : '' ?>">
    <?php $this->insert('picture_default', $image->picture) ?>
  </figure>
<?php endif ?>

<div class="content-wrapper hero-content">
  <?php if ($this->text): ?>
  <div class="hero-text">
    <?= $this->text ?>
  </div>
  <?php endif; ?>
</div>
    <?php if ($this->useHtml && $this->html): ?>
    <div class="content-wrapper hero-html">
        <?= $this->html ?>
    </div>
    <?php endif; ?>

<?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; */ ?>
  <?php if ($this->height == '-bgimage' && !$this->playerAspect && isset($minHeight)): ?>
    <style>.hero-wrapper_<?= $this->id ?>:before { content: ""; display: block; padding-top: <?= $minHeight ?>; width: 100%; }</style>
  <?php endif; ?>
</div>
<?php $this->endblock(); ?>