{% extends 'base.html' %}
{% load help_tags %}

{% block content %}
    <div class="container py-4">
        <div class="row mb-3">
            <div class="col-md-8">
                <div class="d-flex justify-content-between align-items-center mb-1">
                    <h2 class="mb-0">User: {{ cid_user.username }}</h2>
                    <div>
                        {% if show_hidden %}
                            <a class="btn btn-sm btn-outline-secondary" href="?">
                                <i class="bi bi-eye-slash me-1"></i>Hide Hidden
                            </a>
                        {% else %}
                            <a class="btn btn-sm btn-outline-info" href="?show_hidden=true">
                                <i class="bi bi-eye me-1"></i>Show Hidden
                            </a>
                        {% endif %}
                    </div>
                </div>
                {% help "Help" %}
                    <div class="card mt-2">
                        <div class="card-body small">
                            <p class="mb-1">This page shows the exam(s) to which you have access.</p>
                            <p class="mb-1">When an exam is available to take it will have a "Start" button next to it.</p>
                            <p class="mb-1">Once you have submitted answers you will be able to view them from the Exam results section. (Please note: although your answers will be visible as soon as they are submitted, correct answers will only be available when the exam results have been published.)</p>
                            <p class="mb-0">If you have not submitted any answer for an exam it will not appear in the Exam Results section below. In this case you can still review the published results by following the "Results Published" link in the assigned exams section.</p>
                        </div>
                    </div>
                {% endhelp %}
            </div>
        </div>

        <div class="row">
            <div class="col-lg-8">
                <div class="card mb-3">
                    <div class="card-header">
                        <h5 class="mb-0">Assigned Exams</h5>
                    </div>
                    <div class="card-body">
                        <p class="text-muted">The following exams will be available to take when active.</p>
                        {% for exam_type, exams in available_exams %}
                            {% if exams %}
                                <h6 class="mt-3">{{ exam_type|title }}</h6>
                                <ul class="list-group">
                                    {% for exam in exams %}
                                        <li class="list-group-item d-flex justify-content-between align-items-center {% if exam.is_hidden %}opacity-50 bg-secondary bg-opacity-10{% endif %}">
                                            <div>
                                                {{ exam }}
                                                {% if exam.active %}<span class="badge bg-success ms-2">Active</span>{% endif %}
                                                {% if exam.publish_results %}<span class="badge bg-info text-dark ms-2">Results Published</span>{% endif %}
                                                {% if exam.is_hidden %}<span class="badge bg-warning text-dark ms-2">Hidden</span>{% endif %}
                                            </div>
                                            <div class="d-flex align-items-center gap-2">
                                                <div class="btn-group btn-group-sm" role="group">
                                                    {% if exam.active %}
                                                        <a class="btn btn-primary" href="{{ exam.get_take_url }}" target="_blank" title="Click to take exam">Start</a>
                                                    {% endif %}
                                                    {% if exam.publish_results %}
                                                        <a class="btn btn-outline-secondary" href="{% url exam_type|lower|add:':exam_scores_user' pk=exam.pk %}" title="Click to view results">Results</a>
                                                    {% endif %}
                                                </div>
                                                {% if not admin %}
                                                    <form method="post" action="{% url 'generic:toggle_hide_item' %}" hx-post="{% url 'generic:toggle_hide_item' %}" class="d-inline">
                                                        {% csrf_token %}
                                                        <input type="hidden" name="content_type_id" value="{{ exam.content_type_id }}">
                                                        <input type="hidden" name="object_id" value="{{ exam.id }}">
                                                        <button type="submit" class="btn btn-sm btn-link text-muted p-0 ms-1" title="{% if exam.is_hidden %}Unhide exam{% else %}Hide exam{% endif %}">
                                                            <i class="bi {% if exam.is_hidden %}bi-eye-slash-fill text-warning{% else %}bi-eye{% endif %}" style="font-size: 1.15rem;"></i>
                                                        </button>
                                                    </form>
                                                {% endif %}
                                            </div>
                                        </li>
                                    {% endfor %}
                                </ul>
                            {% endif %}
                        {% endfor %}
                    </div>
                </div>

                {% if all_exams %}
                    <div class="card mb-3">
                        <div class="card-header">
                            <h5 class="mb-0">Exam Results</h5>
                        </div>
                        <div class="card-body">
                            <p class="text-muted">Click an exam to view answers (and scores when results are published).</p>
                            {% for exam_type, exams in all_exams %}
                                {% if exams %}
                                    <h6 class="mt-3">{{ exam_type|title }}</h6>
                                    <ul class="list-group">
                                        {% for exam in exams %}
                                            <li class="list-group-item d-flex justify-content-between align-items-center {% if exam.is_hidden %}opacity-50 bg-secondary bg-opacity-10{% endif %}">
                                                <div>
                                                    {% if admin %}
                                                        <a href="{% url exam_type|add:':exam_scores_user_admin' pk=exam.pk user_id=user.pk %}">{{ exam }}</a>
                                                    {% else %}
                                                        <a href="{% url exam_type|add:':exam_scores_user' pk=exam.pk %}">{{ exam }}</a>
                                                    {% endif %}
                                                    {% if exam.active %}<span class="badge bg-success ms-2">Active</span>{% endif %}
                                                    {% if exam.publish_results %}<span class="badge bg-info text-dark ms-2">Results Published</span>{% endif %}
                                                    {% if exam.is_hidden %}<span class="badge bg-warning text-dark ms-2">Hidden</span>{% endif %}
                                                </div>
                                                <div class="d-flex align-items-center gap-2">
                                                    {% if not admin %}
                                                        <form method="post" action="{% url 'generic:toggle_hide_item' %}" hx-post="{% url 'generic:toggle_hide_item' %}" class="d-inline">
                                                            {% csrf_token %}
                                                            <input type="hidden" name="content_type_id" value="{{ exam.content_type_id }}">
                                                            <input type="hidden" name="object_id" value="{{ exam.id }}">
                                                            <button type="submit" class="btn btn-sm btn-link text-muted p-0 ms-1" title="{% if exam.is_hidden %}Unhide exam{% else %}Hide exam{% endif %}">
                                                                <i class="bi {% if exam.is_hidden %}bi-eye-slash-fill text-warning{% else %}bi-eye{% endif %}" style="font-size: 1.15rem;"></i>
                                                            </button>
                                                        </form>
                                                    {% endif %}
                                                    <div class="small text-muted">&nbsp;</div>
                                                </div>
                                            </li>
                                        {% endfor %}
                                    </ul>
                                {% endif %}
                            {% endfor %}
                        </div>
                    </div>
                {% endif %}

                <div class="card mb-3">
                    <div class="card-header">
                        <h5 class="mb-0">Atlas Collections</h5>
                    </div>
                    <div class="card-body">
                        <p class="text-muted mb-2">Available, in-progress, and completed Atlas collections for this user.</p>
                        <div
                            id="atlas-collections-scores"
                            hx-get="{% url 'atlas:user_collections' %}?user_id={{ cid_user.id }}{% if show_hidden %}&show_hidden=1{% endif %}"
                            hx-trigger="load"
                            hx-target="this"
                            hx-swap="innerHTML">
                            <div class="text-muted small">Loading collections...</div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-4">
                <div class="card mb-3">
                    <div class="card-body">
                        <h6 class="card-title">Actions</h6>
                        <p class="small text-muted">Quick links and information.</p>
                        <!-- Placeholder for any future quick actions -->
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}