{% comment %}Partial that renders the synonyms list + add form. Used by condition_detail and HTMX responses.{% endcomment %}
{% load static %}

{% with syns=condition.get_synonyms %}
    {% if syns %}
        {% for syn in syns %}
            <a class="badge bg-secondary text-decoration-none text-white me-1" href="{{ syn.get_absolute_url }}">{{ syn }}</a>
        {% endfor %}
    {% else %}
        &mdash;
    {% endif %}
{% endwith %}

{% if request.user.is_authenticated and can_merge %}
    <div class="mt-2 d-flex gap-2">
        <!-- Button to add an existing condition as a synonym -->
        <a class="btn btn-sm btn-outline-primary" data-bs-toggle="collapse" href="#addSynonymCollapse" role="button" aria-expanded="false" aria-controls="addSynonymCollapse">Add synonym</a>

        <!-- Button to create a new condition and add it as a synonym -->
        <a class="btn btn-sm btn-outline-success" data-bs-toggle="collapse" href="#createSynonymCollapse" role="button" aria-expanded="false" aria-controls="createSynonymCollapse">Create synonym</a>
    </div>

    <!-- Collapse: add existing condition -->
    <div class="collapse mt-2" id="addSynonymCollapse">
        <div class="card card-body">
            <form method="POST"
                  hx-post="{% url 'atlas:condition_detail' condition.pk %}"
                  hx-target="#synonyms-container" hx-swap="innerHTML">
                {% csrf_token %}
                <input type="hidden" name="action" value="add_synonym" />
                <div class="mb-2">
                    <label class="form-label small">Select existing condition</label>
                    {{ synonym_form.condition }}
                </div>
                <button class="btn btn-primary btn-sm" type="submit">Add</button>
            </form>
        </div>
    </div>

    <!-- Collapse: create new condition -->
    <div class="collapse mt-2" id="createSynonymCollapse">
        <div class="card card-body">
            <form method="POST"
                  hx-post="{% url 'atlas:condition_detail' condition.pk %}"
                  hx-target="#synonyms-container" hx-swap="innerHTML">
                {% csrf_token %}
                <input type="hidden" name="action" value="add_synonym" />
                <div class="mb-2">
                    <label class="form-label small">Create new synonym name</label>
                    <input class="form-control" type="text" name="synonym_name" placeholder="e.g. Granulomatosis with Polyangitis" required />
                </div>
                <button class="btn btn-success btn-sm" type="submit">Create</button>
            </form>
        </div>
    </div>
{% endif %}