<div id="prior-card-{{case.id}}" class="col-12 col-md-6 col-lg-4" data-case="{{case.id}}">
    <div class="card h-100 shadow-sm {% if added %}border-success{% else %}border-secondary{% endif %}">
        <div class="card-body d-flex flex-column">
            {% if error %}
                <div class="alert alert-danger py-1 mb-2 small">{{ error }}</div>
            {% endif %}
            <div class="d-flex justify-content-between align-items-start mb-2">
                <h5 class="card-title mb-0">{{case.title}}</h5>
                <div class="d-flex gap-1">
                    <span class="badge {% if relation_type == 'PR' %}bg-info{% else %}bg-warning text-dark{% endif %}">{% if relation_type == 'PR' %}Prior{% else %}Future{% endif %}</span>
                    {% if added %}
                        <span class="badge bg-success">Added</span>
                    {% else %}
                        <span class="badge bg-secondary">Available</span>
                    {% endif %}
                </div>
            </div>

            {% if relation %}
                <p class="card-text small text-muted mb-2">Relation: <span class="fw-medium">{{ relation }}</span></p>
            {% endif %}
            <p class="card-text small text-muted mb-2">
                Study date:
                {% if case.study_date %}
                    <span class="fw-medium">{{ case.study_date }}</span>
                {% else %}
                    <span class="fw-medium">Unknown</span>
                {% endif %}
            </p>

            <div class="mb-3 small">{{case.get_series_blocks|safe}}</div>

            <div class="mt-auto">
                <div class="d-flex gap-2 mb-2">
                    <a href="{% url 'atlas:case_detail' case.id %}" class="btn btn-sm btn-outline-primary">View case</a>
                </div>

                {% if not added %}
                    <form class="row g-2"
                          {% if case_number %}
                              hx-post="{% url 'atlas:collection_case_priors' collection.id case_number %}"
                          {% else %}
                              hx-post="{% url 'atlas:collection_case_priors_legacy' collection.id casedetail.case.pk %}"
                          {% endif %}
                          hx-target="#prior-card-{{case.id}}" hx-swap="outerHTML">
                        {% csrf_token %}
                        <input type="hidden" name="prior_case_id" value="{{case.id}}" />
                        <div class="col-12">
                            <input class="form-control form-control-sm" type="text" name="relation" value="{{relation}}" placeholder="Relation to case" />
                        </div>
                        <div class="col-12">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" name="use_study_date_relation" value="1" id="prior_use_date_{{case.id}}" />
                                <label class="form-check-label small" for="prior_use_date_{{case.id}}">Use study dates to generate relation text</label>
                            </div>
                        </div>
                        <div class="col-8">
                            <select class="form-select form-select-sm" name="prior_visibility" id="prior_visibility_{{case.id}}">
                                <option value="AL" {% if visibility == 'AL' %}selected{% endif %}>Always</option>
                                <option value="RE" {% if visibility == 'RE' %}selected{% endif %}>Review</option>
                                <option value="NO" {% if visibility == 'NO' %}selected{% endif %}>None</option>
                            </select>
                        </div>
                        <div class="col-4 d-grid">
                            <button class="btn btn-sm btn-primary" type="submit">Add</button>
                        </div>
                    </form>
                {% else %}
                    <form
                        {% if case_number %}
                            hx-post="{% url 'atlas:collection_case_priors' collection.id case_number %}"
                        {% else %}
                            hx-post="{% url 'atlas:collection_case_priors_legacy' collection.id casedetail.case.pk %}"
                        {% endif %}
                        hx-target="#prior-card-{{case.id}}" hx-swap="outerHTML">
                        {% csrf_token %}
                        <input type="hidden" name="remove" value="{{case.id}}" />
                        <div class="mb-2 small text-muted">Current relation: <strong>{{relation}}</strong></div>
                        <div class="d-flex gap-2">
                            <select class="form-select form-select-sm w-50" name="prior_visibility" id="prior_visibility_{{case.id}}" disabled>
                                <option value="AL" {% if visibility == 'AL' %}selected{% endif %}>Always</option>
                                <option value="RE" {% if visibility == 'RE' %}selected{% endif %}>Review</option>
                                <option value="NO" {% if visibility == 'NO' %}selected{% endif %}>None</option>
                            </select>
                            <button class="btn btn-sm btn-danger" type="submit">Remove</button>
                        </div>
                    </form>
                {% endif %}

            </div>
        </div>

        <div class="card-footer bg-transparent">
            <small class="text-muted">Case ID: {{ case.id }}</small>
        </div>
    </div>
</div>
