{% extends "base_app.html" %} {% set active_page = 'games' %} {% block title
%}Games{% endblock %} {% block content %}
<section class="games-page">
  <div class="games-header">
    <div>
      <h1>Past games</h1>
    </div>
    <a href="{{ url_for('main.play') }}" class="btn btn-primary">New game</a>
  </div>

  <article class="panel">
    {% if games %}
    <div class="games-list">
      {% for game in games %}
      <a
        class="game-card"
        href="{{ url_for('main.game_detail', game_id=game.id) }}"
      >
        <div class="game-card-main">
          <div>
            <p class="game-card-label">Opponent</p>
            <p class="game-card-title">{{ game.opponent_username }}</p>
          </div>
          <span class="result-badge result-{{ game.result }}"
            >{{ game.result }}</span
          >
        </div>
        <div class="game-card-meta">
          <span>You played {{ game.my_color }}</span>
          <span>{{ game.time_mode or "Untimed" }}</span>
          <span>{{ game.move_count }} moves</span>
          <span
            >{{ game.termination_detail or game.termination or "finished"
            }}</span
          >
          <span>{{ game.ended_at or game.started_at or "Unknown date" }}</span>
        </div>
      </a>
      {% endfor %}
    </div>
    {% else %}
    <div class="empty-state">
      <h2>No saved games yet</h2>
      <p class="muted">Finished matches will appear here automatically.</p>
    </div>
    {% endif %}
  </article>
</section>
{% endblock %}