tsv08kulmbach-website/app/components/age-groups.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): $upcoming = !empty($g['upcoming']); ?>
                    <li class="age-group<?= $upcoming ? ' age-group--upcoming' : '' ?>">
                        <div class="age-group__media">
<?php if (!empty($g['photo']['base'])): ?>
<?php component('img', ['image' => $g['photo'], 'sizes' => '(max-width: 600px) 100vw, (max-width: 992px) 50vw, 560px', 'class' => 'age-group__img']); ?>
<?php else: ?>
                            <img class="age-group__img" src="<?= e(asset('img/persons/platzhalter-spieler.jpg')) ?>" alt="" width="480" height="1047" loading="lazy" decoding="async">
<?php endif; ?>
<?php if ($upcoming): ?>
                            <span class="age-group__soon">In Entstehung</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><?php foreach ((array) $g['training'] as $i => $t): ?><?= $i ? '<br>' : '' ?><?= e($t) ?><?php endforeach; ?></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>