<?php declare(strict_types=1); ?>

<!-- Display a single track object -->
<?php $content = $viewModel->content(); ?>
<?php $contentTags = $viewModel->contentTags(); ?>
<?php $parent = $viewModel->parent(); ?>

<!-- Container -->
<div class="container">

<!-- Title and meta information -->
<div>
  <h2 class="title"><?php echo xss($content->title()); ?></h2>
  <p class="content-info">
    <span class="small">
      <?php echo xss($content->date()->format($viewModel->dateFormat())) . ' | '; ?>
      <?php echo xss($content->info()); ?>
      <?php if ($contentTags) {
          echo ' | ';
          $tags = [];
          foreach ($contentTags as $key => $value) {
            $tags[] = '<a href="?id=' . xss($key) . '">' . xss($value) . '</a>';
          }
          echo \implode(', ', $tags);
        } ?>
    </span>
  </p>
</div>

<!-- Image -->
<?php if ($content->image()): ?>
<div>
  <figure class="figure-centre">
    <img class="image img-fluid" src="<?php echo $content->cachedImage(1170); ?>"
      <?php if ($content->caption()): ?>
        title="<?php echo xss($content->caption()); ?>" alt="<?php echo xss($content->caption()); ?>"/>
      <figcaption><em><?php echo xss($content->caption()); ?></em></figcaption>
      <?php else: ?>
        alt="" />
      <?php endif; ?>
    </figure>
</div>
<?php endif; ?>

<!-- Description -->
<div class="description">
  <?php if ($content->description()) echo $content->descriptionForDisplay(); ?>
</div>

<!-- Media attachment -->
<?php if ($content->media()): ?>
<div>
  <p class="media"><b><a href="<?php echo TFISH_URL . 'enclosure/?id=' . xss($content->id()); ?>"><i title="<?php echo TFISH_DOWNLOAD; ?>" class="fas fa-download"></i> <?php echo xss($content->media()); ?></a></b></p>
</div>

<!-- Google map of track -->
<div class="map-responsive">
  <div id="map"></div>
</div>

<script>
  var map;
  function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      mapTypeId: google.maps.MapTypeId.SATELLITE,
      zoom: 14
    });

    var src = '<?php echo TFISH_MEDIA_URL . xss($content->media()); ?>';

    var kmlLayer = new google.maps.KmlLayer(src, {
        suppressInfoWindows: false,
        preserveViewport: false,
        map: map
      });
  }
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=<?php echo xss($viewModel->mapsApiKey()); ?>&callback=initMap" async defer></script>
<?php endif; ?>

<!-- Rights -->
<?php if ($content->rights()): ?>
<div>
  <p class="rights"><?php echo xss($content->listRights()[$content->rights()]); ?></p>
</div>
<?php endif; ?>

<?php if (!empty($parent)) include_once('parent.html'); ?>

<!-- Container -->
</div>
