<?php
require_once __DIR__ . '/includes/data.php';

$slug = $_GET['slug'] ?? '';
$serie = find_serie_by_slug($slug);

if (!$serie) {
  http_response_code(404);
  $page_title = '404';
  include __DIR__ . '/includes/header.php';
  echo '<header class="page-head"><div class="container"><h1>404 — '
     . ($lang === 'en' ? 'Series not found' : 'Serie niet gevonden')
     . '</h1></div></header>';
  echo '<section><div class="container center"><a class="btn" href="'
     . e(url('ontwerpen.php')) . '">' . e(t('serie.back')) . '</a></div></section>';
  include __DIR__ . '/includes/footer.php';
  exit;
}

$page_active = 'designs';
$page_title  = $serie['name'];
include __DIR__ . '/includes/header.php';
$cover = $serie['cover'];
$coverPath = $cover ? 'images/designs/' . $cover['id'] . '/' . rawurlencode($cover['file']) : null;
?>

<header class="page-head" style="<?= $coverPath ? 'background-image:linear-gradient(180deg,rgba(15,20,17,.55) 0%,rgba(15,20,17,.85) 100%),url(\'' . e($coverPath) . '\');background-size:cover;background-position:center' : '' ?>">
  <div class="container">
    <div class="breadcrumb">
      <a href="<?= e(url('ontwerpen.php')) ?>"><?= e(t('nav.designs')) ?></a> /
      <span><?= e($serie['name']) ?></span>
    </div>
    <div class="eyebrow"><?= e(t('serie.title.prefix')) ?></div>
    <h1><?= e($serie['name']) ?></h1>
    <p class="lede">
      <?= sprintf(e(t('serie.models.count')), count($serie['models'])) ?>
      <?php if ($serie['length_min'] !== null): ?>
        · <?= e(rtrim(rtrim(number_format($serie['length_min'], 1, '.', ''), '0'), '.')) ?>
        — <?= e(rtrim(rtrim(number_format($serie['length_max'], 1, '.', ''), '0'), '.')) ?> m
      <?php endif; ?>
      <?php if (!empty($serie['categories'])): ?>
        · <?= e(implode(', ', $serie['categories'])) ?>
      <?php endif; ?>
    </p>
  </div>
</header>

<section style="padding:80px 0;background:var(--paper)">
  <div class="container">

    <div class="grid grid-3">
      <?php foreach ($serie['models'] as $m):
        $img = !empty($m['images']) ? design_img($m, 0) : null;
      ?>
        <a class="card card-light" href="<?= e(url('design.php', ['id' => $m['id']])) ?>">
          <div class="card-img">
            <?php if ($img): ?>
              <img src="<?= e($img) ?>" alt="<?= e($m['name']) ?>" loading="lazy">
            <?php else: ?>
              <div style="aspect-ratio:16/10;display:grid;place-items:center;background:var(--canvas);color:var(--muted);font-size:12px;letter-spacing:.2em;text-transform:uppercase"><?= e(t('model.no_image')) ?></div>
            <?php endif; ?>
            <?php if ($m['length_m'] !== null): ?>
              <div class="card-tag"><?= e(rtrim(rtrim(number_format($m['length_m'], 1, '.', ''), '0'), '.')) ?> m</div>
            <?php endif; ?>
          </div>
          <div class="card-body">
            <div class="card-name"><?= e($m['name']) ?></div>
            <div class="card-meta">
              <?= e($m['type']) ?>
              <?php if (!empty($m['category'])): ?> · <?= e($m['category']) ?><?php endif; ?>
            </div>
          </div>
        </a>
      <?php endforeach; ?>
    </div>

    <div style="text-align:center;margin-top:80px">
      <a href="<?= e(url('ontwerpen.php')) ?>" style="font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--ochre)"><?= e(t('serie.back')) ?></a>
    </div>
  </div>
</section>

<?php include __DIR__ . '/includes/footer.php'; ?>
