{% extends 'base.html' %}

{% block content %}
    <div class="d-flex flex-wrap justify-content-between align-items-start gap-3 mb-3">
        <div>
            <h2 class="h4 mb-1">
                {{ collection.name }}
                {% if collection.in_review_mode or cid_user_exam.completed %}
                    <span class="badge bg-light text-dark ms-2">Review</span>
                {% endif %}
                {% if collection.case_query_messaging_enabled and total_outstanding_feedback %}
                    <span class="badge bg-danger ms-2">{{ total_outstanding_feedback }} outstanding feedback</span>
                {% endif %}
            </h2>
            <div class="text-muted small">
                {% if cid is not None %}
                    CID: <strong>{{ cid }}</strong>
                {% else %}
                    <h5>Overview</h5>
                {% endif %}
            </div>
        </div>
        <div class="card border-secondary summary-card">
            <div class="card-body py-2 px-3">
                <div class="small text-muted">Progress</div>
                {% if not collection.review_only %}
                    <div class="fw-semibold">{{ answer_count }} / {{ collection_length }} answered</div>
                    <div class="progress progress-compact mt-2">
                        <div class="progress-bar" role="progressbar" style="width: {% widthratio answer_count collection_length 100 %}%"></div>
                    </div>
                {% else %}
                    <div class="fw-semibold">Review-only collection</div>
                {% endif %}
                <div class="mt-2 small">Started: {{ cid_user_exam.start_time }}</div>
                {% if cid_user_exam.completed %}
                    <div class="mt-1 small">End time: {{ cid_user_exam.end_time|default:"-" }}</div>
                {% endif %}
                {% if collection.case_query_messaging_enabled and collection.in_review_mode or collection.case_query_messaging_enabled and cid_user_exam.completed %}
                    <div class="mt-2">
                        <a class="btn btn-sm {% if total_outstanding_feedback %}btn-danger{% else %}btn-outline-secondary{% endif %}"
                           href="{% if cid is not None %}{% url 'atlas:collection_feedback_overview' pk=collection.id cid=cid passcode=passcode %}{% else %}{% url 'atlas:collection_feedback_overview_user' pk=collection.id %}{% endif %}">
                            {% if total_outstanding_feedback %}
                                Review Feedback Hub
                            {% else %}
                                Open Feedback Hub
                            {% endif %}
                        </a>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>

    <div class="list-group mb-3">
        {% for question, answer, self_review, review_stats, timing_state in question_answer_tuples %}
            <div class="list-group-item {% if review_stats.has_outstanding_feedback %}border-warning border-2{% elif not answer %}bg-danger-subtle border-danger-subtle{% endif %}">
                <div class="d-flex flex-wrap justify-content-between align-items-start gap-2">
                    <div>
                        <div class="fw-semibold">
                            Case {{ forloop.counter }}{% if collection.show_title_post and answer and answer.completed or collection.show_title_post and cid_user_exam.completed %}: {{ question.case.title|default:question.case.pk|truncatechars:70 }}{% endif %}
                            {% if answer and answer.completed or cid_user_exam.completed %}
                                <span class="badge bg-success-subtle text-success-emphasis ms-2">Completed</span>
                            {% elif answer %}
                                <span class="badge bg-warning-subtle text-warning-emphasis ms-2">Saved</span>
                            {% else %}
                                <span class="badge bg-danger-subtle text-danger-emphasis ms-2">Not answered</span>
                            {% endif %}
                            {% if self_review %}
                                <span class="badge bg-info-subtle text-info-emphasis ms-1">Self review added</span>
                            {% endif %}
                            {% if timing_state.effective_time_limit is not None and timing_state.case_view_locked %}
                                <span class="badge bg-dark ms-1">Time expired</span>
                            {% endif %}
                            {% if collection.case_query_messaging_enabled %}
                                {% if review_stats.has_outstanding_feedback %}
                                    <span class="badge bg-danger ms-1">{{ review_stats.outstanding_feedback_count }} feedback item{{ review_stats.outstanding_feedback_count|pluralize }} to review</span>
                                {% elif review_stats.has_messages %}
                                    <span class="badge bg-secondary ms-1">{{ review_stats.message_count }} conversation message{{ review_stats.message_count|pluralize }}</span>
                                {% endif %}
                            {% endif %}
                        </div>
                        {% if collection.show_title_post and answer and answer.completed or collection.show_title_post and cid_user_exam.completed %}
                            <div class="small text-muted">
                                {{ question.case }}
                            </div>
                        {% endif %}
                    </div>
                    <div class="d-flex flex-wrap gap-2">
                        <a class="btn btn-sm btn-primary"
                           href="{% if cid is not None %}{% url 'atlas:collection_case_view_take' pk=collection.id case_number=forloop.counter0 cid=cid passcode=passcode %}{% else %}{% url 'atlas:collection_case_view_take_user' pk=collection.id case_number=forloop.counter0 %}{% endif %}">
                            Open Case
                        </a>
                        {% if collection.in_review_mode or cid_user_exam.completed %}
                            <a class="btn btn-sm btn-outline-info"
                               href="{% url 'atlas:add_self_review' cid_user_exam.id question.case.id %}">
                                {% if self_review %}Add New Self Review{% else %}Add Self Review{% endif %}
                            </a>
                            {% if collection.case_query_messaging_enabled and review_stats.has_messages %}
                                <a class="btn btn-sm {% if review_stats.has_outstanding_feedback %}btn-danger{% else %}btn-outline-dark{% endif %}"
                                   href="{% if cid is not None %}{% url 'atlas:collection_feedback_overview' pk=collection.id cid=cid passcode=passcode %}{% else %}{% url 'atlas:collection_feedback_overview_user' pk=collection.id %}{% endif %}#case-feedback-{{ question.case.id }}">
                                    View Conversation
                                </a>
                            {% endif %}
                        {% endif %}
                    </div>
                </div>

                {% if self_review %}
                    <div class="mt-2 pt-2 border-top">
                        <div class="small fw-semibold mb-1">Your self reviews</div>
                        <div class="d-flex flex-wrap gap-2">
                            {% for review in self_review %}
                                <a class="btn btn-sm btn-outline-info"
                                   href="{% url 'atlas:self_review_detail' cid_user_exam.id question.case.id review.id %}">
                                    View review {{ forloop.counter }}
                                </a>
                                <a class="btn btn-sm btn-outline-warning"
                                   href="{% url 'atlas:self_review_update' cid_user_exam.id question.case.id review.id %}">
                                    Edit review {{ forloop.counter }}
                                </a>
                            {% endfor %}
                        </div>
                    </div>
                {% endif %}

                {% if not collection.review_only %}
                    {% if answer %}
                        <details class="mt-2">
                            <summary class="small text-muted">Preview saved answer/report</summary>
                            <div class="small mt-2 p-2 bg-body-tertiary rounded">
                                {% if answer.answer %}
                                    {{ answer.answer|linebreaksbr }}
                                {% else %}
                                    {{ answer.json_answer }}
                                {% endif %}
                            </div>
                        </details>
                    {% endif %}
                {% endif %}
            </div>
        {% endfor %}
    </div>

    {% if not collection.review_only and not cid_user_exam.completed %}
        <div class="card border-warning-subtle">
            <div class="card-body d-flex flex-wrap justify-content-between align-items-center gap-2">
                <div>
                    <div class="fw-semibold">Ready to submit this session?</div>
                    <div class="small text-muted">You can continue to review and edit your answers until you finish the session.</div>
                    <div id="completed-state" class="mt-2 small text-danger"></div>
                </div>
                <form hx-post=""
                      hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
                      hx-delete
                      hx-confirm="Finish session?"
                      hx-target="#completed-state"
                      _="on htmx:afterOnLoad remove me"
                      class="m-0">
                    <button type="submit" name="finish" value="finish" class="btn btn-warning">Finish Session</button>
                </form>
            </div>
        </div>
    {% endif %}

    {% if collection.end_overview_content %}
        <div class="card mt-3">
            <div class="card-body">
                {{ collection.end_overview_content|safe }}
            </div>
        </div>
    {% endif %}

    {% if end_overview_resources %}
        <div class="card mt-3">
            <div class="card-body">
                <h6 class="mb-2">Further Resources</h6>
                <div class="d-grid gap-2">
                    {% for resource in end_overview_resources %}
                        <div class="small">{{ resource.get_display }}</div>
                    {% endfor %}
                </div>
            </div>
        </div>
    {% endif %}

    {# Sharing panel – only for registered-user attempts (not CID candidates) #}
    {% if collection.show_results_sharing_information and cid_user_exam.user_user_id %}
        <div hx-get="{% url 'atlas:collection_exam_sharing_panel' cid_user_exam.pk %}"
             hx-trigger="load"
             hx-swap="innerHTML">
            <div class="text-muted small mt-3">Loading sharing settings…</div>
        </div>
    {% endif %}



{% endblock %}

{% block js %}
    <script>
        $(document).ready(() => {
        })
    </script>
{% endblock %}