{% extends "base.html" %}

{% block title %}Orange Catcher - A Fun Arcade Game{% endblock %}

{% block content %}
<div class="container-fluid hero-section">
    <div class="content-wrapper">
        <h1 class="game-title">Orange Catcher</h1>
        <p class="game-subtitle">An old-school arcade game, reimagined.</p>
        <a href="#game-area" class="btn btn-play">Play Now</a>
    </div>
    <div class="shape-1"></div>
    <div class="shape-2"></div>
</div>

<div id="game-area" class="container game-container my-5">
    <div class="row">
        <div class="col-lg-8 mx-auto">
            <div class="canvas-wrapper">
                <canvas id="gameCanvas" width="800" height="600"></canvas>
            </div>
        </div>
    </div>
    <div class="row mt-4">
        <div class="col-lg-8 mx-auto text-center">
            <div class="instructions">
                <h2 class="instructions-title">How to Play</h2>
                <p>Use the <strong>left</strong> and <strong>right</strong> arrow keys to move your character.</p>
                <p>Catch as many oranges as you can before you run out of lives!</p>
            </div>
        </div>
    </div>
</div></div>

<div class="container my-5">
    <div class="row">
        <div class="col-lg-6 mx-auto">
            <h2 class="text-center mb-4">Leaderboard</h2>
            <table class="table table-striped table-dark">
                <thead>
                    <tr>
                        <th scope="col">#</th>
                        <th scope="col">Player</th>
                        <th scope="col">Score</th>
                    </tr>
                </thead>
                <tbody id="leaderboard-body">
                    <!-- Scores will be inserted here by JavaScript -->
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Name Submission Modal -->
<div class="modal fade" id="nameModal" tabindex="-1" aria-labelledby="nameModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="nameModalLabel">Game Over!</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>Your final score is: <strong id="finalScore"></strong></p>
        <form id="nameForm">
          {% csrf_token %}
          <div class="mb-3">
            <label for="playerName" class="form-label">Enter your name to save your score:</label>
            <input type="text" class="form-control" id="playerName" required>
          </div>
          <button type="submit" class="btn btn-primary">Save Score</button>
        </form>
      </div>
    </div>
  </div>
</div>
{% endblock %}