{% extends 'generic/base_supervisor.html' %}

{% block content %}
    <div class="container py-4">
        <div class="d-flex flex-wrap justify-content-between align-items-start gap-3 mb-4">
            <div>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-2">
                        <li class="breadcrumb-item"><a href="{% url 'generic:supervisor_overview' supervisor.pk %}">Dashboard</a></li>
                        <li class="breadcrumb-item"><a href="{% url 'generic:supervisor_trainee' supervisor.pk trainee.pk %}">{{ trainee.first_name }} {{ trainee.last_name }}</a></li>
                        <li class="breadcrumb-item active text-muted" aria-current="page">Collection Feedback</li>
                    </ol>
                </nav>
                <h2 class="h4 mb-1">Collection: {{ collection.name }}</h2>
                <div class="text-muted small">
                    Trainee: <strong>{{ trainee.first_name }} {{ trainee.last_name }} ({{ trainee.email }})</strong>
                </div>
            </div>
            <div class="card border-secondary bg-dark bg-opacity-50 summary-card">
                <div class="card-body py-2 px-3">
                    <div class="small text-muted">Feedback Summary</div>
                    <div class="fw-semibold text-light">{{ 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>
            </div>
        </div>

        {% if outstanding_rows %}
            <div class="mb-4">
                <h3 class="h5 mb-3 text-warning"><i class="bi bi-exclamation-circle me-1"></i>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-warning bg-dark bg-opacity-25">
                            <div class="card-header d-flex justify-content-between align-items-center gap-2 bg-dark bg-opacity-50 border-bottom border-warning border-opacity-50">
                                <div>
                                    <strong class="text-light">Case {{ row.casedetail.sort_order|add:1 }}</strong>
                                    {% if collection.show_title_post %}
                                        <span class="ms-1 text-muted">{{ 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-3">
                                <div hx-get="{{ row.thread_url }}"
                                     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 border border-success bg-success bg-opacity-10 text-success mb-4" role="alert">
                <i class="bi bi-check-circle-fill me-2"></i>No outstanding feedback needs acknowledgement.
            </div>
        {% endif %}

        {% if history_rows %}
            <div>
                <h3 class="h5 mb-3 text-info"><i class="bi bi-chat-left-text me-1"></i>Previous Conversations</h3>
                <div class="accordion" id="feedbackHistoryAccordion">
                    {% for row in history_rows %}
                        <div class="accordion-item bg-dark border-secondary" id="case-feedback-{{ row.casedetail.case.id }}">
                            <h2 class="accordion-header bg-dark" id="heading-{{ row.casedetail.case.id }}">
                                <button class="accordion-button collapsed bg-dark text-light border-secondary" 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 bg-dark bg-opacity-50 pt-3">
                                    <div hx-get="{{ row.thread_url }}"
                                         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 bg-dark bg-opacity-25">
                <div class="card-body text-muted text-center py-4">
                    <i class="bi bi-chat-dots-fill display-6 mb-2 d-block"></i>
                    No case conversations have been started yet.
                </div>
            </div>
        {% endif %}
    </div>
{% endblock %}