46 lines
2.5 KiB
PHP
46 lines
2.5 KiB
PHP
|
<?php
|
||
|
|
|
||
|
|
declare(strict_types=1);
|
||
|
|
|
||
|
|
/**
|
||
|
|
* „Nächste Spiele"-Slider (teamübergreifend). Props: $matches (data/matchcenter.json
|
||
|
|
* → upcoming[]). Spiegelt die Mechanik des banner-slider (Crossfade, Pause/Play,
|
||
|
|
* prefers-reduced-motion) über den generischen Antrieb assets/js/carousel.js.
|
||
|
|
* Ohne JS ist nur die erste Folie sichtbar. Leer → nichts rendern (Off-Season).
|
||
|
|
*/
|
||
|
|
$matches = $matches ?? [];
|
||
|
|
if ($matches === []) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
$total = count($matches);
|
||
|
|
?>
|
||
|
|
<section class="section match-slider" id="naechste-spiele" aria-roledescription="Karussell" aria-label="Nächste Spiele unserer Mannschaften" data-carousel>
|
||
|
|
<div class="container">
|
||
|
|
<h2>Nächste Spiele</h2>
|
||
|
|
<ul class="match-slider__track" id="match-slider-track" data-carousel-track aria-live="off">
|
||
|
|
<?php foreach ($matches as $i => $m): ?>
|
||
|
|
<li class="match-slider__slide" data-carousel-slide role="group" aria-roledescription="Folie" aria-label="<?= ($i + 1) ?> von <?= $total ?>"<?= $i === 0 ? '' : ' hidden' ?>>
|
||
|
|
<p class="match-slider__team"><?= e($m['team_name'] ?? '') ?></p>
|
||
|
|
<?php component('match-card', ['match' => $m, 'variant' => 'hero']); ?>
|
||
|
|
</li>
|
||
|
|
<?php endforeach; ?>
|
||
|
|
</ul>
|
||
|
|
<?php if ($total > 1): ?>
|
||
|
|
<div class="match-slider__controls" data-carousel-controls hidden>
|
||
|
|
<button class="match-slider__toggle" type="button" data-carousel-toggle aria-pressed="false" aria-controls="match-slider-track" hidden>
|
||
|
|
<?= icon('pause-fill', 'match-slider__toggle-icon match-slider__toggle-icon--pause') ?>
|
||
|
|
<?= icon('play-fill', 'match-slider__toggle-icon match-slider__toggle-icon--play') ?>
|
||
|
|
<span class="visually-hidden" data-carousel-toggle-label>Automatischen Wechsel pausieren</span>
|
||
|
|
</button>
|
||
|
|
<div class="match-slider__dots" role="group" aria-label="Spiel wählen">
|
||
|
|
<?php foreach ($matches as $i => $m): ?>
|
||
|
|
<button class="match-slider__dot" type="button" data-carousel-dot aria-label="Spiel <?= ($i + 1) ?> von <?= $total ?>: <?= e(($m['home'] ?? '') . ' gegen ' . ($m['away'] ?? '')) ?>">
|
||
|
|
<span class="match-slider__progress" data-carousel-progress aria-hidden="true"></span>
|
||
|
|
</button>
|
||
|
|
<?php endforeach; ?>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<?php endif; ?>
|
||
|
|
</div>
|
||
|
|
</section>
|