{% load i18n %}

<div class="card">
    <h5 class="card-header">{% trans "Step 3: Pick Route" %}</h5>
    <div class="card-body">
        {% if proposals %}
        <form hx-post="{% url 'plugins:netbox_fms:fibercircuit_wizard' %}" hx-target="#wizard-content">
            {% csrf_token %}
            <div class="list-group mb-3">
                {% for proposal in proposals %}
                <label class="list-group-item list-group-item-action d-flex align-items-start gap-3">
                    <input type="radio" name="selected_proposal" value="{{ forloop.counter0 }}"
                           class="form-check-input mt-1" {% if forloop.first %}checked{% endif %}>
                    <div>
                        <strong>{% trans "Route" %} {{ forloop.counter }}</strong>
                        <br>
                        <small class="text-muted">
                            {{ proposal.hop_count }} {% trans "hops" %}
                            &bull; {{ proposal.new_splice_count }} {% trans "new splices" %}
                            &bull; {{ proposal.existing_splice_count }} {% trans "existing splices" %}
                        </small>
                        <br>
                        <small>
                            {% if proposal.is_contiguous %}
                                <span class="badge bg-success">{% trans "Contiguous" %}</span>
                            {% endif %}
                            {% trans "Strands:" %}
                            {% for strand in proposal.strands %}{{ strand.position }}{% if not forloop.last %}, {% endif %}{% endfor %}
                        </small>
                    </div>
                </label>
                {% endfor %}
            </div>
            <div class="text-end">
                <a href="{% url 'plugins:netbox_fms:fibercircuit_wizard' %}?restart=1" class="btn btn-outline-secondary">
                    {% trans "Start Over" %}
                </a>
                <button type="submit" name="_back" value="1" class="btn btn-outline-primary">
                    <i class="mdi mdi-arrow-left"></i> {% trans "Back" %}
                </button>
                <button type="submit" class="btn btn-primary">
                    {% trans "Next" %} <i class="mdi mdi-arrow-right"></i>
                </button>
            </div>
        </form>
        {% else %}
        <p class="text-muted">{% trans "No routes available." %}</p>
        {% endif %}
    </div>
</div>