{% 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">Review: {{ collection.name }}</h2>
            <span class="badge bg-light text-dark">Review Collection</span>
        </div>
        <p class="mb-0 mt-2 text-body-secondary">Open the collection and browse completed cases.</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 %}">
                    Browse
                </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>

        {% partialdef sharing-info inline %}
            {% if collection.show_results_sharing_information and sharing_summary %}
                <section class="take-start-card mt-3">
                    <div class="fw-semibold mb-2 small text-body-secondary text-uppercase" style="letter-spacing:.05em;">Who can see your results</div>
                    <ul class="list-unstyled mb-0 small">
                        <li class="mb-1">
                            <span class="badge bg-secondary me-1">You</span>
                            Always visible to you.
                        </li>
                        {% for u in sharing_summary.always_visible_to %}
                            <li class="mb-1">
                                <span class="badge bg-secondary me-1">Author/Marker</span>
                                {{ u.get_full_name|default:u.username }}
                                {% if u.email %}<span class="text-muted">&lt;{{ u.email }}&gt;</span>{% endif %}
                            </li>
                        {% endfor %}
                        {% if sharing_summary.supervisor_always %}
                            <li class="mb-1">
                                <span class="badge bg-info text-dark me-1">Supervisor</span>
                                {% if sharing_summary.supervisor %}
                                    {{ sharing_summary.supervisor.get_full_name|default:sharing_summary.supervisor.username }}
                                    (always shared – collection setting)
                                {% else %}
                                    Your supervisor, if one is linked to your profile (collection setting always on).
                                {% endif %}
                            </li>
                        {% elif sharing_summary.supervisor_opt_in %}
                            <li class="mb-1">
                                <span class="badge bg-outline-secondary me-1" style="border:1px solid var(--bs-secondary);color:var(--bs-secondary);">Supervisor</span>
                                {% if sharing_summary.supervisor %}
                                    {{ sharing_summary.supervisor.get_full_name|default:sharing_summary.supervisor.username }}
                                    — you can choose to share with them after starting.
                                {% else %}
                                    You have a supervisor linked but they don't have a login account yet.
                                {% endif %}
                            </li>
                        {% endif %}
                        {% if not sharing_summary.always_visible_to and not sharing_summary.supervisor_always and not sharing_summary.supervisor_opt_in %}
                            <li class="text-muted fst-italic">Only you can see your results for this collection.</li>
                        {% endif %}
                    </ul>
                </section>
            {% endif %}

        {% endpartialdef %}
    {% else %}
        <section class="take-start-card">
            <p class="mb-0">
                Please sign in to access this review collection.
                <a href="{% url 'login' %}?next={% url 'atlas:collection_take_start' pk=collection.pk %}">Log in here</a>.
            </p>
        </section>
    {% endif %}

{% endblock %}