{% extends 'pageWrapper.html' %}
{% import "macros.html" as macros %}
{% set show_footer = True %}

{% block head %}
    <title>Generation in Progress</title>
    <noscript>
        <meta http-equiv="refresh" content="1">
    </noscript>
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename="styles/waitSeed.css") }}"/>
{% endblock %}

{% block body %}
    {% include 'header/oceanIslandHeader.html' %}
    <div id="wait-seed-wrapper" class="grass-island">
        <div id="wait-seed">
            <h1>Generation in Progress</h1>
            Waiting for game to generate, this page auto-refreshes to check.
        </div>
    </div>
    <script>
        const waitSeedDiv = document.getElementById("wait-seed");
        async function checkStatus() {
            try {
                const response = await fetch("{{ url_for('api.wait_seed_api', seed=seed_id) }}");
                if (response.status !== 202) {
                    // Seed is ready; reload page to load seed page.
                    location.reload();
                    return;
                }

                const data = await response.json();
                waitSeedDiv.innerHTML = `
                    <h1>Generation in Progress</h1>
                    <p>${data.text}</p>
                `;

                setTimeout(checkStatus, 1000); // Continue polling.
            } catch (error) {
                waitSeedDiv.innerHTML = `
                    <h1>Progress Unknown</h1>
                    <p>${error.message}<br />(Last checked: ${new Date().toLocaleTimeString()})</p>
                `;

                setTimeout(checkStatus, 1000);
            }
        }

        setTimeout(checkStatus, 1000);
    </script>
{% endblock %}