<ul class="list-group" id="collection-inline-list-items">
  {% if collections and collections|length > 0 %}
    {% for collection in collections %}
      <li class="list-group-item d-flex justify-content-between align-items-center" data-collection-pk="{{ collection.pk }}">
        <div class="flex-fill">
          <div class="d-flex align-items-baseline">
            <a href="{% url 'atlas:collection_detail' pk=collection.pk %}" class="me-2">{{ collection.name }}</a>
            <small class="text-muted">{% if collection.author.all %}By {{ collection.author.all|join:", " }}{% endif %}</small>
          </div>
          {% if collection.description %}<div class="small text-muted">{{ collection.description|truncatechars:120 }}</div>{% endif %}
        </div>
        <div class="d-flex gap-2">
          <a class="btn btn-sm btn-outline-secondary" href="{% url 'atlas:collection_detail' pk=collection.pk %}" target="_blank" rel="noopener">Open</a>
          {% if case %}
            <button class="btn btn-sm btn-primary" hx-post="{% url 'atlas:add_collection_to_case_inline' case.pk collection.pk %}" hx-target="#case-{{ case.pk }}-collections" hx-swap="beforeend">Add</button>
          {% else %}
            <span class="text-muted small">Open a case to add</span>
          {% endif %}
        </div>
      </li>
    {% endfor %}
  {% else %}
    <li class="list-group-item text-muted">No collections found.</li>
  {% endif %}
</ul>
