{% extends 'atlas/base.html' %}

{% block content %}
    <style>
        .take-start-hero {
            border: 1px solid rgba(255, 255, 255, 0.08);
            background: linear-gradient(135deg, rgba(13, 110, 253, 0.22), rgba(25, 135, 84, 0.2));
            border-radius: .75rem;
            padding: 1rem 1.25rem;
            margin-bottom: 1rem;
        }

        .take-start-card {
            border: 1px solid rgba(255, 255, 255, 0.08);
            background: rgba(255, 255, 255, 0.03);
            border-radius: .75rem;
            padding: 1rem;
        }

        .take-start-meta {
            display: grid;
            grid-template-columns: 9rem 1fr;
            gap: .35rem .75rem;
        }

        .take-start-meta dt {
            font-weight: 600;
            color: var(--bs-secondary-color);
            margin: 0;
        }

        .take-start-meta dd {
            margin: 0;
        }
    </style>

    <section class="take-start-hero">
        <div class="d-flex flex-wrap align-items-center gap-2 justify-content-between">
            <h2 class="mb-0">Start: {{ collection.name }}</h2>
            {% if cid_exam.completed %}
                <span class="badge bg-light text-dark">Review Mode</span>
            {% endif %}
        </div>
        <p class="mb-0 mt-2 text-body-secondary">Open the collection and begin or resume your session.</p>
    </section>

    {% if collection.start_screen_content %}
        <section class="take-start-card mb-3">
            {{ collection.start_screen_content|safe }}
        </section>
    {% endif %}

    {% if start_screen_resources %}
        <section class="take-start-card mb-3">
            <h6 class="mb-2">Resources</h6>
            <div class="d-grid gap-2">
                {% for resource in start_screen_resources %}
                    <div class="small">{{ resource.get_display }}</div>
                {% endfor %}
            </div>
        </section>
    {% endif %}

    {% if request.user.is_authenticated and valid_user %}
        <section class="take-start-card">
            <dl class="take-start-meta mb-3">
                <dt>User</dt>
                <dd>{{ request.user }}</dd>

                {% if cid_exam %}
                    <dt>Started</dt>
                    <dd>{{ cid_exam.start_time }}</dd>

                    {% if cid_exam.completed %}
                        <dt>Ended</dt>
                        <dd>{{ cid_exam.end_time }}</dd>
                    {% endif %}
                {% endif %}
            </dl>

            <div class="d-flex flex-wrap gap-2">
                <a class="btn btn-primary"
                   href="{% url 'atlas:collection_case_view_take_user' pk=collection.pk case_number=0 %}">
                    {% if cid_exam.completed %}Review{% else %}Start{% endif %}
                </a>

                {% if cid_exam.completed %}
                    <a class="btn btn-outline-secondary"
                       href="{% url 'atlas:collection_take_overview_user' pk=collection.pk %}">Overview</a>
                {% endif %}
            </div>
        </section>

        {% include "atlas/collection_review_start.html#sharing-info" %}
    {% else %}
        <section class="take-start-card">
            <p class="mb-3">
                Enter your CID and passcode below.
                Registered users can
                <a href="{% url 'login' %}?next={% url 'atlas:collection_take_start' pk=collection.pk %}">log in here</a>.
            </p>

            <div class="row g-2 align-items-end">
                <div class="col-12 col-md-5">
                    <label class="form-label" for="cid-box">Candidate ID</label>
                    <input id="cid-box" class="form-control" type="text" value="Candidate ID">
                </div>
                <div class="col-12 col-md-5">
                    <label class="form-label" for="passcode-box">Passcode</label>
                    <input id="passcode-box" class="form-control" type="text" value="Passcode">
                </div>
                <div class="col-12 col-md-2 d-grid">
                    <button id="start-candidate-btn" class="btn btn-primary" type="button">Start</button>
                </div>
            </div>
        </section>

        <script type="text/javascript">
            $(document).ready(function () {
                window.location.search.substr(1).split("&").forEach((item) => {
                    const s = item.split("=");
                    if (s[0] === "cid") {
                        $("#cid-box").val(s[1]);
                    }
                    if (s[0] === "passcode") {
                        $("#passcode-box").val(s[1]);
                    }
                });

                $("#cid-box, #passcode-box").keypress(function (e) {
                    if (e.which === 10 || e.which === 13) {
                        $("#start-candidate-btn").click();
                    }
                });

                $("#start-candidate-btn").click(() => {
                    const cid = $("#cid-box").val();
                    const passcode = $("#passcode-box").val();

                    if (Number.isInteger(parseInt(cid))) {
                        window.location.replace("{% url 'atlas:collection_case_view_take' pk=collection.pk case_number=0 cid='0000000' passcode='ZZZZZZ' %}".replace("0000000", cid).replace("ZZZZZZ", passcode));
                    } else {
                        alert("Please enter a valid Candidate ID (CID).");
                    }
                });
            });
        </script>
    {% endif %}

{% endblock %}