<div class="list-group">
  {% if findings %}
    {% for f in findings %}
      <div class="list-group-item d-flex justify-content-between align-items-center" data-finding-pk="{{ f.pk }}" data-seriesfinding-pk="{{ f.pk }}" data-label="{% if f.findings.all %}{% for sub in f.findings.all %}{{ sub.name }}{% if not forloop.last %}, {% endif %}{% endfor %}{% elif f.description %}{{ f.description|truncatechars:80|escape }}{% elif f.series %}Series {{ f.series.id }}{% else %}Finding {{ f.pk }}{% endif %}">
        <div class="flex-fill">
          <div class="d-flex w-100 justify-content-between">
            <strong class="mb-1">{% if f.series %}{{ f.series.id }}{% else %}Series{% endif %}{% if f.description %}: {{ f.description|truncatechars:80 }}{% endif %}</strong>
            <small class="text-muted">{{ f.pk }}</small>
          </div>
          <p class="mb-1 text-truncate">
            {% if f.findings.all %}
              {% for sub in f.findings.all %}
                <span class="badge bg-light text-dark me-1">{{ sub.name }}</span>
              {% endfor %}
            {% endif %}
            {{ f.description }}
          </p>
        </div>
        <div class="ms-2">
          {% if f.series %}
            <a class="btn btn-sm btn-outline-secondary" href="{% url 'atlas:series_detail' pk=f.series.pk %}">View series</a>
          {% endif %}
        </div>
      </div>
    {% endfor %}
  {% else %}
    <div class="list-group-item">No findings found</div>
  {% endif %}
</div>
