{% extends "base_app.html" %} {% set active_page = 'games' %} {% block title
%}Game {{ game.id }}{% endblock %} {% block content %}
<section class="games-page">
  <div class="games-header">
    <div>
      <h1>{{ current_user.username }} vs {{ game.opponent_username }}</h1>
      <p class="muted">
        {{ game.time_mode or "Untimed" }} - {{ game.termination_detail or
        game.termination or "finished" }} - {{ game.ended_at or game.started_at
        or "Unknown date" }}
      </p>
    </div>
    <div class="cta-row games-header-actions">
      <a href="{{ url_for('main.games_history') }}" class="btn btn-secondary"
        >Back to games</a
      >
      <a href="{{ url_for('main.play') }}" class="btn btn-primary"
        >Play again</a
      >
    </div>
  </div>

  <section class="game-detail-layout">
    <article class="panel">
      <div class="game-summary">
        <div class="game-summary-copy">
          <p class="game-summary-label">Result</p>
          <h2 class="game-summary-title">{{ game.result }}</h2>
        </div>
        <span class="result-badge result-{{ game.result }}"
          >{{ game.result }}</span
        >
      </div>
      <div class="game-summary-meta">
        <div class="game-meta-row">
          <span class="game-meta-key">You</span>
          <span class="game-meta-value"
            >{{ current_user.username }} ({{ game.my_color }})</span
          >
        </div>
        <div class="game-meta-row">
          <span class="game-meta-key">Opponent</span>
          <span class="game-meta-value"
            >{{ game.opponent_username }} ({{ game.opponent_color }})</span
          >
        </div>
        <div class="game-meta-row">
          <span class="game-meta-key">Moves</span>
          <span class="game-meta-value">{{ game.move_count }}</span>
        </div>
      </div>

      <div class="history-board" aria-label="Final board position">
        {% for row in board_rows %} {% for square in row %}
        <div
          class="history-square history-square-{{ square.shade }}"
          title="{{ square.square }}"
        >
          {% if square.piece_image %}
          <img
            src="{{ url_for('static', filename='board_pieces/' ~ square.piece_image) }}"
            alt=""
          />
          {% endif %}
        </div>
        {% endfor %} {% endfor %}
      </div>
      <p class="muted">Final position</p>
    </article>

    <article class="panel">
      <h2>Moves</h2>
      {% if move_pairs %}
      <div class="move-list-wrap">
        <table class="move-table">
          <thead>
            <tr>
              <th>#</th>
              <th>White</th>
              <th>Black</th>
            </tr>
          </thead>
          <tbody>
            {% for pair in move_pairs %}
            <tr>
              <td>{{ pair.move_no }}.</td>
              <td>{{ pair.white }}</td>
              <td>{{ pair.black }}</td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
      {% else %}
      <p class="muted">No moves were recorded for this game.</p>
      {% endif %}
    </article>
  </section>
</section>
{% endblock %}