48 lines
2.0 KiB
PHP
48 lines
2.0 KiB
PHP
|
<?php
|
||
|
|
|
||
|
|
declare(strict_types=1);
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Jugend-Altersklassen als Karten-Grid. Props:
|
||
|
|
* $groups array [{code, name, photo?{base,widths,alt}, training?, note?}, …]
|
||
|
|
* $title string (optional, Default 'Unsere Jugendmannschaften')
|
||
|
|
* $anchor string (optional, Default 'mannschaften')
|
||
|
|
* Fehlt ein Foto, greift ein Platzhalter; fehlt die Trainingszeit, entfällt die Zeile.
|
||
|
|
*/
|
||
|
|
$title = $title ?? 'Unsere Jugendmannschaften';
|
||
|
|
$anchor = $anchor ?? 'mannschaften';
|
||
|
|
$groups = $groups ?? [];
|
||
|
|
if ($groups === []) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
?>
|
||
|
|
<section class="section age-groups" id="<?= e($anchor) ?>">
|
||
|
|
<div class="container">
|
||
|
|
<h2><?= e($title) ?></h2>
|
||
|
|
<ul class="age-groups__grid">
|
||
|
|
<?php foreach ($groups as $g): ?>
|
||
|
|
<li class="age-group">
|
||
|
|
<div class="age-group__media">
|
||
|
|
<?php if (!empty($g['photo']['base'])): ?>
|
||
|
|
<?php component('img', ['image' => $g['photo'], 'sizes' => '(max-width: 600px) 100vw, 320px', 'class' => 'age-group__img']); ?>
|
||
|
|
<?php else: ?>
|
||
|
|
<img class="age-group__img" src="<?= e(asset('img/persons/platzhalter.jpg')) ?>" alt="" width="400" height="300" loading="lazy" decoding="async">
|
||
|
|
<?php endif; ?>
|
||
|
|
<?php if (!empty($g['code'])): ?>
|
||
|
|
<span class="age-group__badge" aria-hidden="true"><?= e($g['code']) ?></span>
|
||
|
|
<?php endif; ?>
|
||
|
|
</div>
|
||
|
|
<div class="age-group__body">
|
||
|
|
<h3 class="age-group__name"><?= e($g['name']) ?></h3>
|
||
|
|
<?php if (!empty($g['training'])): ?>
|
||
|
|
<p class="age-group__training"><?= icon('clock', 'age-group__icon') ?><span><?= e($g['training']) ?></span></p>
|
||
|
|
<?php elseif (!empty($g['note'])): ?>
|
||
|
|
<p class="age-group__training text-muted"><?= e($g['note']) ?></p>
|
||
|
|
<?php endif; ?>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<?php endforeach; ?>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</section>
|