<div id="case-resources-list">
  {% if case.caseresource_set.exists %}
    <ul class="list-unstyled mb-0">
      {% for cr in case.caseresource_set.all %}
        <li class="py-1 d-flex justify-content-between align-items-center" data-caseresource-id="{{ cr.id }}" data-pre="{{ cr.pre_review|yesno:'1,0' }}">
          <div>
            <a href="{% url 'atlas:resource_detail' cr.resource.pk %}">{{ cr.resource.name }}</a>
            {% if cr.pre_review %}
              <span class="badge bg-info text-dark ms-2 small">pre</span>
            {% else %}
              <span class="badge bg-secondary text-light ms-2 small">post</span>
            {% endif %}
          </div>
          {% if can_edit %}
            <div class="d-flex gap-2">
              <button type="button" class="btn btn-sm btn-outline-secondary" title="Toggle pre/post" hx-post="{% url 'atlas:case_toggle_resource_pre' pk=case.pk %}" hx-vals='{"resource_id": "{{ cr.resource.pk }}"}' hx-swap="outerHTML" hx-target="#case-resources-list">Toggle</button>
              <button type="button" class="btn btn-sm btn-outline-danger" hx-post="{% url 'atlas:case_detach_resource' pk=case.pk %}" hx-vals='{"resource_id": "{{ cr.resource.pk }}"}' hx-swap="outerHTML" hx-target="#case-resources-list">Remove</button>
            </div>
          {% endif %}
        </li>
      {% endfor %}
    </ul>
  {% else %}
    <div class="text-muted">No resources attached to this case.</div>
  {% endif %}
</div>
