<li class="list-group-item d-flex gap-3 align-items-start" data-question_pk="{{ casedetail.case.pk }}">

    <div class="flex-fill">
        <div class="d-flex justify-content-between align-items-start">
            <div>
                <a class="h6 mb-0 text-decoration-none case-link"
                   href="{% url 'atlas:collection_case_view' pk=collection.pk case_number=forloop.counter0 %}"
                   data-case-base-href="{% url 'atlas:collection_case_view' pk=collection.pk case_number=0 %}">
                    {{ casedetail.case.title }}
                </a>
                <div class="small text-muted"><span class="case-number">Case {{ forloop.counter }}</span> &mdash; <span class="text-truncate">{{ casedetail.case.description|default_if_none:""|truncatechars:80 }}</span></div>
            </div>
        </div>

        <div class="mt-2 small text-muted">
            {% if casedetail.series_count|default:0 == 0 %}
                <span class="text-warning">This case has no series / stacks attached</span>
            {% else %}
                {{ casedetail.series_count }} series
            {% endif %}
            {% if casedetail.question_schema %}
                &nbsp;•&nbsp;<span class="text-success">Questions defined</span>
            {% endif %}
        </div>


        <div class="btn-group btn-group-sm ms-2" role="group" aria-label="case-field-links">
        <!-- History button: opens modal populated from hidden content on page -->
            {% if casedetail.case.history %}
                <a class="btn btn-outline-secondary" href="#"
                   onclick="document.querySelector('#case-field-modal .modal-content').innerHTML = document.getElementById('case-field-{{ casedetail.case.pk }}-history').innerHTML;"
                   data-bs-toggle="modal" data-bs-target="#case-field-modal" title="View history">
                    <i class="bi bi-clock-history text-primary"></i>
                </a>
            {% else %}
                <a class="btn btn-outline-secondary disabled" aria-disabled="true" href="javascript:void(0);" title="No history">
                    <i class="bi bi-clock-history text-muted"></i>
                </a>
            {% endif %}

        <!-- Discussion button -->
            {% if casedetail.case.discussion %}
                <a class="btn btn-outline-secondary" href="#"
                   onclick="document.querySelector('#case-field-modal .modal-content').innerHTML = document.getElementById('case-field-{{ casedetail.case.pk }}-discussion').innerHTML;"
                   data-bs-toggle="modal" data-bs-target="#case-field-modal" title="View discussion">
                    <i class="bi bi-chat-left-text text-primary"></i>
                </a>
            {% else %}
                <a class="btn btn-outline-secondary disabled" aria-disabled="true" href="javascript:void(0);" title="No discussion">
                    <i class="bi bi-chat-left-text text-muted"></i>
                </a>
            {% endif %}

        <!-- Report button -->
            {% if casedetail.case.report %}
                <a class="btn btn-outline-secondary" href="#"
                   onclick="document.querySelector('#case-field-modal .modal-content').innerHTML = document.getElementById('case-field-{{ casedetail.case.pk }}-report').innerHTML;"
                   data-bs-toggle="modal" data-bs-target="#case-field-modal" title="View report">
                    <i class="bi bi-file-earmark-text text-primary"></i>
                </a>
            {% else %}
                <a class="btn btn-outline-secondary disabled" aria-disabled="true" href="javascript:void(0);" title="No report">
                    <i class="bi bi-file-earmark-text text-muted"></i>
                </a>
            {% endif %}
        </div>

    </div>

    <div class="d-flex align-items-center ms-3">
        {% include 'atlas/partials/casedetails_management_links.html' %}
    </div>

    {# Pre-render hidden modal content for this case to avoid HTMX calls #}
    <div class="d-none">
        <div id="case-field-{{ casedetail.case.pk }}-history">
            <div class="modal-header">
                <h5 class="modal-title">History</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <br/>
                {% if casedetail.get_history %}
                    <div class="pre-whitespace">{{ casedetail.get_history|linebreaks }}</div>
                {% else %}
                    <div class="text-muted">No history available for this case.</div>
                {% endif %}
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
        <div id="case-field-{{ casedetail.case.pk }}-discussion">
            {% include 'atlas/partials/case_field_modal.html' with field='discussion' content=casedetail.case.discussion %}
        </div>
        <div id="case-field-{{ casedetail.case.pk }}-report">
            {% include 'atlas/partials/case_field_modal.html' with field='report' content=casedetail.case.report %}
        </div>
    </div>

</li>
