<div id="{{ thread_dom_id }}" class="case-review-thread-root card border-secondary-subtle mt-3">
    <div class="card-header d-flex justify-content-between align-items-center">
        <div>
            <strong>Case Conversation</strong>
            {% if unacknowledged_count %}
                <span class="badge bg-danger-subtle text-danger-emphasis ms-2">{{ unacknowledged_count }} awaiting acknowledgement</span>
            {% endif %}
        </div>
        <span class="small text-muted">Case {{ case.pk }}</span>
    </div>
    <div class="card-body">
        {% if messages %}
            <div class="d-flex flex-column gap-2 mb-3">
                {% for message in messages %}
                    <div class="border rounded p-2 {% if message.message_type == 'feedback' %}border-warning-subtle bg-warning-subtle{% elif message.message_type == 'query' %}border-info-subtle bg-info-subtle{% else %}border-secondary-subtle bg-body-tertiary{% endif %}">
                        <div class="d-flex justify-content-between align-items-start gap-2 mb-1">
                            <div>
                                <span class="fw-semibold">{{ message.get_author_display }}</span>
                                <span class="badge text-bg-dark ms-1">{{ message.get_message_type_display }}</span>
                                {% if message.requires_acknowledgement %}
                                    {% if message.is_acknowledged %}
                                        <span class="badge bg-success-subtle text-success-emphasis ms-1">Acknowledged</span>
                                    {% else %}
                                        <span class="badge bg-danger-subtle text-danger-emphasis ms-1">Awaiting acknowledgement</span>
                                    {% endif %}
                                {% endif %}
                            </div>
                            <div class="small text-muted">{{ message.created_at|date:"Y-m-d H:i" }}</div>
                        </div>
                        <div class="small">{{ message.message|linebreaksbr }}</div>
                        {% if message.requires_acknowledgement and not message.is_acknowledged %}
                            {% if can_acknowledge_query and message.message_type == 'query' %}
                                <form class="mt-2"
                                      hx-post="{{ thread_url }}"
                                      hx-target="#{{ thread_dom_id }}"
                                      hx-swap="outerHTML">
                                    {% csrf_token %}
                                    <input type="hidden" name="action" value="acknowledge">
                                    <input type="hidden" name="message_id" value="{{ message.id }}">
                                    {% if cid %}<input type="hidden" name="cid" value="{{ cid }}">{% endif %}
                                    {% if passcode %}<input type="hidden" name="passcode" value="{{ passcode }}">{% endif %}
                                    <button type="submit" class="btn btn-sm btn-outline-success">Acknowledge learner query</button>
                                </form>
                            {% elif can_acknowledge_feedback and message.message_type != 'query' %}
                                <form class="mt-2"
                                      hx-post="{{ thread_url }}"
                                      hx-target="#{{ thread_dom_id }}"
                                      hx-swap="outerHTML">
                                    {% csrf_token %}
                                    <input type="hidden" name="action" value="acknowledge">
                                    <input type="hidden" name="message_id" value="{{ message.id }}">
                                    {% if cid %}<input type="hidden" name="cid" value="{{ cid }}">{% endif %}
                                    {% if passcode %}<input type="hidden" name="passcode" value="{{ passcode }}">{% endif %}
                                    <button type="submit" class="btn btn-sm btn-outline-success">Acknowledge feedback</button>
                                </form>
                            {% endif %}
                        {% endif %}
                    </div>
                {% endfor %}
            </div>
        {% else %}
            <div class="text-muted small mb-3">No messages yet for this case.</div>
        {% endif %}

        {% if can_feedback %}
            <form hx-post="{{ thread_url }}"
                  hx-target="#{{ thread_dom_id }}"
                  hx-swap="outerHTML"
                  class="border rounded p-3 mb-2 bg-body-tertiary">
                {% csrf_token %}
                <input type="hidden" name="action" value="add_message">
                <div class="row g-2 align-items-end">
                    <div class="col-md-8">
                        <label class="form-label small fw-semibold">Supervisor response</label>
                        {{ supervisor_form.message }}
                    </div>
                    <div class="col-md-2">
                        <label class="form-label small fw-semibold">Type</label>
                        <select name="message_type" class="form-select form-select-sm">
                            <option value="feedback">Feedback</option>
                            <option value="reply">Reply</option>
                        </select>
                    </div>
                    <div class="col-md-2">
                        <div class="form-check mt-4 pt-2">
                            {{ supervisor_form.requires_acknowledgement }}
                            <label for="{{ supervisor_form.requires_acknowledgement.id_for_label }}" class="form-check-label small">Needs acknowledgement</label>
                        </div>
                    </div>
                </div>
                <div class="mt-2">
                    <button type="submit" class="btn btn-sm btn-primary">Send feedback</button>
                </div>
            </form>
        {% endif %}

        {% if can_query %}
            <form hx-post="{{ thread_url }}"
                  hx-target="#{{ thread_dom_id }}"
                  hx-swap="outerHTML"
                  class="border rounded p-3 bg-body-tertiary">
                {% csrf_token %}
                <input type="hidden" name="action" value="add_message">
                {% if cid %}<input type="hidden" name="cid" value="{{ cid }}">{% endif %}
                {% if passcode %}<input type="hidden" name="passcode" value="{{ passcode }}">{% endif %}
                <label class="form-label small fw-semibold">Ask a question / raise a query</label>
                {{ query_form.message }}
                <div class="mt-2">
                    <button type="submit" class="btn btn-sm btn-outline-info">Send query</button>
                </div>
            </form>
        {% endif %}
    </div>
</div>
