{% extends "base.html" %}
{% block title %}Blokus — Replay{% endblock %}
{% block content %}
<div id="replay-container">
    <div id="board-container">
        <div id="board"></div>
    </div>
    <div id="replay-sidebar">
        <div id="replay-controls">
            <button id="prev-btn">◀ Prev</button>
            <button id="play-btn">▶ Play</button>
            <button id="next-btn">Next ▶</button>
            <span id="step-indicator">0 / {{ total_moves }}</span>
        </div>
        <input type="range" id="step-slider" min="0" max="{{ total_moves }}" value="0">
        <div class="speed-control">
            <label>Speed:</label>
            <select id="speed-select">
                <option value="800">0.5x</option>
                <option value="400" selected>1x</option>
                <option value="200">2x</option>
                <option value="100">4x</option>
            </select>
        </div>
        <div id="move-list"></div>
        <div id="statistics"></div>
        <div style="margin-top: 15px;">
            <a href="/runs">← Back to Runs</a>
        </div>
    </div>
</div>

<script>
    window.REPLAY_RUN_ID = "{{ run_id }}";
    window.BOARD_SIZE = {{ board_size }};
    window.TOTAL_MOVES = {{ total_moves }};
    window.REPLAY_DATA = {{ replay_data | tojson }};
    window.CELL_SIZE = 30;
</script>
{% endblock %}