<li class="list-group-item d-flex align-items-start" id="displayset-{{ ds.pk }}">
    <div class="me-3">
        {% if ds.viewerstate and ds.annotations %}
            <button
                type="button"
                class="btn btn-primary btn-lg"
                style="min-width: 100px;"
                onclick='importAnnotations_main_viewer({{ ds.annotations|safe }}); importViewerState_main_viewer({{ ds.viewerstate|safe }});'
            >Load</button>
        {% endif %}
    </div>
    <div class="flex-grow-1">
        <b>{{ ds.name }}</b>
        {% if ds.description %}
            <span class="text-muted">({{ ds.description }})</span>
        {% endif %}

        <div class="mt-2">
            <strong>Findings:</strong>
            {% if ds.findings.all %}
                <ul>
                    {% for finding in ds.findings.all %}
                        <li>{{ finding }}</li>
                    {% endfor %}
                </ul>
            {% else %}
                <span class="text-muted">None</span>
            {% endif %}
        </div>
        <div>
            <strong>Structures:</strong>
            {% if ds.structures.all %}
                <ul>
                    {% for structure in ds.structures.all %}
                        <li>{{ structure }}</li>
                    {% endfor %}
                </ul>
            {% else %}
                <span class="text-muted">None</span>
            {% endif %}
        </div>
        <div>
            <strong>Conditions:</strong>
            {% if ds.conditions.all %}
                <ul>
                    {% for condition in ds.conditions.all %}
                        <li>{{ condition }}</li>
                    {% endfor %}
                </ul>
            {% else %}
                <span class="text-muted">None</span>
            {% endif %}
        </div>
        <div>
            <details>
                <summary class="small text-muted" style="cursor:pointer;">Show advanced (viewer state & annotations)</summary>
                <div>
                    {% include 'atlas/partials/json_pretty.html' with json_value=ds.viewerstate title='Viewer State' %}
                </div>
                <div>
                    {% include 'atlas/partials/json_pretty.html' with json_value=ds.annotations title='Annotations' %}
                </div>
            </details>
        </div>
        <div class="mt-2">
            <button
                id="displayset-{{ ds.pk }}-edit-btn"
                hx-get="{% url 'atlas:case_displaysets_edit' ds.pk %}"
                hx-target="#displayset-edit-form-{{ ds.pk }}"
                hx-swap="innerHTML"
                hx-after
                class="btn btn-warning btn-sm"
                onclick="
                         this.style.display='none';
                         var li = this.closest('li');
                         var ul = li.parentNode;
                         ul.insertBefore(li, ul.firstChild);
                         li.scrollIntoView({behavior: 'smooth', block: 'center'});
                         setTimeout(function() {
                         var form = document.querySelector('#displayset-edit-form-{{ ds.pk }} form');
                         if (form) {
                         var cancelBtn = document.createElement('button');
                         cancelBtn.type = 'button';
                         cancelBtn.className = 'btn btn-secondary btn-sm ms-2';
                         cancelBtn.textContent = 'Cancel';
                         cancelBtn.onclick = function() {
                         document.querySelector('#displayset-edit-form-{{ ds.pk }}').innerHTML = '';
                         document.querySelector('#displayset-{{ ds.pk }}-edit-btn').style.display = '';
                         };
                         form.appendChild(cancelBtn);
                         }
                         }, 100);
                        "
            >Edit</button>
            <button
                hx-delete="{% url 'atlas:case_displaysets_delete' ds.pk %}"
                hx-target="closest li"
                hx-swap="outerHTML"
                class="btn btn-danger btn-sm"
                onclick="return confirm('Are you sure you want to delete this display set?');"
            >Delete</button>
        </div>
    </div>
    <div id="displayset-edit-form-{{ ds.pk }}"></div>
    <div class="align-self-start ms-3">
        <span class="text-muted small">ID: {{ ds.pk }}</span>
    </div>
</li>