<?php snippet('header') ?>

<main class="jouer">
  <!-- Intro Section -->
  <section class="jouer__intro">
    <?php if ($page->intro_title()->isNotEmpty()): ?>
      <h1 class="jouer__title"><?= $page->intro_title() ?></h1>
    <?php endif ?>

    <?php if ($page->intro_text()->isNotEmpty()): ?>
      <p class="jouer__text"><?= $page->intro_text() ?></p>
    <?php endif ?>
  </section>

  <!-- Games List -->
  <section class="jouer__games">
    <?php foreach ($page->children()->listed() as $game): ?>
      <article class="game-card">
        <!-- Badge -->
        <?php if ($game->badge()->isNotEmpty() && $game->badge()->value() !== 'none'): ?>
          <span class="game-card__badge game-card__badge--<?= $game->badge() ?>">
            <?= $game->badge()->value() === 'new' ? 'NEW' : ($game->badge()->value() === 'coming_soon' ? 'INCOMING' : $game->badge()) ?>
          </span>
        <?php endif ?>

        <!-- Cover -->
        <?php if ($cover = $game->cover()->toFile()): ?>
          <div class="game-card__cover">
            <img src="<?= $cover->url() ?>" alt="<?= $game->title() ?>">
          </div>
        <?php endif ?>

        <!-- Info -->
        <div class="game-card__info">
          <h2 class="game-card__title"><?= $game->title() ?></h2>

          <?php if ($game->description()->isNotEmpty()): ?>
            <p class="game-card__description"><?= $game->description() ?></p>
          <?php endif ?>

          <!-- Play Button -->
          <?php if ($game->game_status()->value() === 'available'): ?>
            <a href="<?= $game->url() ?>" class="game-card__play btn">
              Jouer
            </a>
          <?php else: ?>
            <span class="game-card__status btn btn--disabled">
              Bientôt disponible
            </span>
          <?php endif ?>
        </div>
      </article>
    <?php endforeach ?>
  </section>
</main>

<?php snippet('footer') ?>
