<div class="list-group">
  {% if displaysets %}
    {% for ds in displaysets %}
      <div class="list-group-item d-flex justify-content-between align-items-center" data-ds-pk="{{ ds.pk }}" data-label="{{ ds.name|escape }}">
        <div class="flex-fill">
          <div class="d-flex w-100 justify-content-between">
            <div>
              <strong class="mb-1">{{ ds.name }}</strong>
              {% if ds.case %}
                <div class="small text-muted">Case: <a href="{% url 'atlas:case_detail' ds.case.pk %}">{{ ds.case.title }}</a> (#{% if ds.case.pk %}{{ ds.case.pk }}{% endif %})</div>
              {% endif %}
            </div>
            <small class="text-muted">{{ ds.pk }}</small>
          </div>
          <p class="mb-1 text-truncate">{{ ds.description }}</p>
        </div>
        <div class="ms-2">
          <a class="btn btn-sm btn-outline-secondary" href="{% url 'atlas:case_displaysets_detail' ds.pk %}">View</a>
        </div>
      </div>
    {% endfor %}
  {% else %}
    <div class="list-group-item">No display sets found</div>
  {% endif %}
</div>
