{% extends "base.html" %}

{% block content %}

    <style>
        .job-card {
            max-width: 520px;
            margin: 80px auto;
            text-align: center;
        }

        .spinner {
            width: 40px;
            height: 40px;
            border: 4px solid #eee;
            border-top: 4px solid #E30613;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin: 20px auto;
        }

        @keyframes spin {
            100% { transform: rotate(360deg); }
        }
    </style>

    <div class="card job-card">

        <h2>Excel Processing</h2>
        <p>Job ID: <b>{{ job_id }}</b></p>

        <div id="status-area">
            <div class="spinner"></div>
            <p>Processing...</p>
        </div>

        <div id="download-area" style="display:none">
            <a id="download-btn" class="btn btn-success">Download Result</a>
        </div>

        <div id="error-area" style="display:none; color:#dc2626">
            <p><b>Error occurred</b></p>
            <pre id="error-detail"></pre>
            <a href="/job/{{ job_id }}/logs" target="_blank">View logs</a>
        </div>

    </div>

    <script>
        const jobId = "{{ job_id }}";

        async function checkStatus() {
            const r = await fetch(`/job/${jobId}/status`);
            const s = await r.json();

            if (s.status === "DONE") {
                document.getElementById("status-area").style.display = "none";
                document.getElementById("download-area").style.display = "block";

                document.getElementById("download-btn").href =
                    `/download/${jobId}`;

                return;
            }

            if (s.status === "ERROR") {
                document.getElementById("status-area").style.display = "none";
                document.getElementById("error-area").style.display = "block";

                document.getElementById("error-detail").innerText =
                    s.detail || "Unknown error";

                return;
            }

            setTimeout(checkStatus, 2000);
        }

        checkStatus();
    </script>

{% endblock %}