{% extends "bases/base.html" %}

{% block title %}404 - Not Found{% endblock %}
{% block description %}The page you are looking for does not exist.{% endblock %}

{% block head %}
<link rel="stylesheet" href="/static/css/404.css">
<link rel="stylesheet" href="/static/css/cap.css">
{% endblock %}

{% block content %}
<section>
    <h1>404</h1>
    <p>
        It seems like the thing you are looking for is not here :[
        <br><br>
        <span class="pcOnly">
        while you're here, why not play some snake?
        </span>
        <span class="mobileOnly">
        You can't play snake on mobile, sorry :(
        </span>
    </p>
    <div class="pcOnly" id="snakeContainer">
        <canvas id="snakeCanvas"></canvas>
    </div>
</section>
<section class="pcOnly flex-row">
    <section class="min-width">
        <h2>Submit score</h2>
        <form action="/snake/submit" method="POST" id="snakeForm">
            <input type="text" id="name" name="name" placeholder="Your name" required>
            <cap-widget id="captcha" data-cap-api-endpoint="https://cap.alfieking.dev/57d36430b9cb/api/"></cap-widget>
            <input type="hidden" id="score" name="score" value="0">
            <input type="hidden" id="game_token" name="game_token" value="{{ token}}">
            <button type="submit" id="submit">Submit</button>
        </form>
    </section>
    <section class="max-width" id="snakeLeaderboardSection">
        <h2>Leaderboard</h2>
        <ul id="snakeLeaderboard">
            {% for score in scores %}
            <li>
                <span>{{ score.position }}</span>
                <span>{{ score.name }}</span>
                <span>{{ score.score }}</span>
            </li>
            {% endfor %}
        </ul>
    </section>
</section>
<section class="max-width mobileOnly" id="snakeLeaderboardSection">
    <h2>Leaderboard</h2>
    <ul id="snakeLeaderboard">
        {% for score in scores %}
        <li>
            <span>{{ score.position }}</span>
            <span>{{ score.name }}</span>
            <span>{{ score.score }}</span>
        </li>
        {% endfor %}
    </ul>
</section>
{% if error %}
<dialog id="errorDialog">
    <h2>Error</h2>
    <p>{{ error }}</p>
    <button onclick="errorDialog.close()">Close</button>
</dialog>
<script>
    const errorDialog = document.getElementById('errorDialog');
    if (errorDialog) {
        errorDialog.showModal();
    }
</script>
{% endif %}
{% endblock %}

{% block scripts %}
<script src="/static/js/snake.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@cap.js/widget"></script>
{% endblock %}