{% extends 'base.html' %}

{% block content %}
    <div class="d-flex flex-wrap justify-content-between align-items-start gap-3 mb-4">
        <div>
            <h2 class="h4 mb-1">{{ collection.name }}</h2>
            <div class="text-muted small">
                {% if cid is not None %}
                    CID: <strong>{{ cid }}</strong>
                {% else %}
                    Feedback hub
                {% endif %}
            </div>
        </div>
        <div class="card border-secondary summary-card">
            <div class="card-body py-2 px-3">
                <div class="small text-muted">Feedback Summary</div>
                <div class="fw-semibold">{{ total_outstanding_feedback }} outstanding feedback item{{ total_outstanding_feedback|pluralize }}</div>
                <div class="small text-muted mt-1">Across {{ outstanding_case_count }} case{{ outstanding_case_count|pluralize }}</div>
                <div class="mt-2">
                    <a class="btn btn-sm btn-outline-secondary"
                       href="{% if cid is not None %}{% url 'atlas:collection_take_overview' pk=collection.id cid=cid passcode=passcode %}{% else %}{% url 'atlas:collection_take_overview_user' pk=collection.id %}{% endif %}">
                        Back to Overview
                    </a>
                </div>
            </div>
        </div>
    </div>

    {% if outstanding_rows %}
        <div class="mb-4">
            <h3 class="h5 mb-3">Outstanding Feedback</h3>
            <div class="d-flex flex-column gap-3">
                {% for row in outstanding_rows %}
                    <section id="case-feedback-{{ row.casedetail.case.id }}" class="card border-danger-subtle">
                        <div class="card-header d-flex justify-content-between align-items-center gap-2">
                            <div>
                                <strong>Case {{ row.casedetail.sort_order|add:1 }}</strong>
                                {% if collection.show_title_post %}
                                    <span class="ms-1">{{ row.casedetail.case.title|default:row.casedetail.case.pk|truncatechars:80 }}</span>
                                {% endif %}
                            </div>
                            <span class="badge bg-danger">{{ row.stats.outstanding_feedback_count }} awaiting acknowledgement</span>
                        </div>
                        <div class="card-body pt-0">
                            <div hx-get="{{ row.thread_url }}{% if row.cid %}?cid={{ row.cid }}&passcode={{ passcode }}{% endif %}"
                                 hx-trigger="load"
                                 hx-target="this"
                                 hx-swap="innerHTML">
                                <div class="small text-muted p-3">Loading conversation...</div>
                            </div>
                        </div>
                    </section>
                {% endfor %}
            </div>
        </div>
    {% else %}
        <div class="alert alert-success">No outstanding feedback needs acknowledgement.</div>
    {% endif %}

    {% if history_rows %}
        <div>
            <h3 class="h5 mb-3">Previous Conversations</h3>
            <div class="accordion" id="feedbackHistoryAccordion">
                {% for row in history_rows %}
                    <div class="accordion-item" id="case-feedback-{{ row.casedetail.case.id }}">
                        <h2 class="accordion-header" id="heading-{{ row.casedetail.case.id }}">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-{{ row.casedetail.case.id }}" aria-expanded="false" aria-controls="collapse-{{ row.casedetail.case.id }}">
                                Case {{ row.casedetail.sort_order|add:1 }}
                                {% if collection.show_title_post %}
                                    : {{ row.casedetail.case.title|default:row.casedetail.case.pk|truncatechars:80 }}
                                {% endif %}
                                <span class="badge bg-secondary ms-2">{{ row.stats.message_count }} message{{ row.stats.message_count|pluralize }}</span>
                            </button>
                        </h2>
                        <div id="collapse-{{ row.casedetail.case.id }}" class="accordion-collapse collapse" aria-labelledby="heading-{{ row.casedetail.case.id }}" data-bs-parent="#feedbackHistoryAccordion">
                            <div class="accordion-body pt-0">
                                <div hx-get="{{ row.thread_url }}{% if row.cid %}?cid={{ row.cid }}&passcode={{ passcode }}{% endif %}"
                                     hx-trigger="revealed once"
                                     hx-target="this"
                                     hx-swap="innerHTML">
                                    <div class="small text-muted p-3">Open to load conversation history...</div>
                                </div>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>
    {% elif not outstanding_rows %}
        <div class="card border-secondary">
            <div class="card-body text-muted small">No case conversations have been started yet.</div>
        </div>
    {% endif %}
{% endblock %}