{% if routes %}
{% for route in routes %}
<div style="padding: 12px 14px;">
    <div style="display:flex; align-items:center; gap:8px;">
        <div class="pw-route-summary" style="margin-bottom:0;">
            <span class="pw-route-stat">
                <i class="mdi mdi-map-marker-distance"></i> {{ route.cost|floatformat:1 }} m
            </span>
            <span class="pw-route-stat">
                <i class="mdi mdi-transit-connection-variant"></i> {{ route.hop_count }} hop{{ route.hop_count|pluralize }}
            </span>
        </div>
        <button type="button" class="btn btn-sm btn-outline-danger pw-clear-results"
                style="margin-left:auto; padding:1px 6px; font-size:0.7rem; line-height:1.4;"
                title="Clear results">
            <i class="mdi mdi-close"></i> Clear
        </button>
    </div>

    {# Interleaved hop list: structure → pathway → structure → ... #}
    <div class="pw-hop-list">
        {% for hop in route.hops %}
        {% if hop.kind == "structure" %}
        <div class="pw-hop-item pw-hop-structure{% if hop.role == 'start' %} pw-hop-start{% elif hop.role == 'end' %} pw-hop-end{% endif %}"
             data-hop-kind="structure" data-hop-pk="{{ hop.pk }}">
            <span class="pw-hop-dot"
                  style="background:{% if hop.role == 'start' %}#2fb344{% elif hop.role == 'end' %}#d63939{% else %}#206bc4{% endif %};"></span>
            <span class="pw-hop-label"><a href="/plugins/pathways/structures/{{ hop.pk }}/">{{ hop.label }}</a></span>
            <span class="pw-hop-type">{{ hop.type }}</span>
        </div>
        {% elif hop.kind == "pathway" %}
        <div class="pw-hop-item pw-hop-pathway"
             data-hop-kind="pathway" data-hop-pk="{{ hop.pk }}">
            <span class="pw-hop-line"></span>
            <span class="pw-hop-label"><a href="/plugins/pathways/pathways/{{ hop.pk }}/">{{ hop.label }}</a></span>
            <span class="pw-hop-length">{% if hop.length %}{{ hop.length|floatformat:0 }}m{% endif %}</span>
        </div>
        {% endif %}
        {% endfor %}
    </div>

    <div class="d-flex flex-wrap gap-2 mt-3">
        {% if cable_pk %}
        <form method="post" action="{% url 'plugins:netbox_pathways:cable_routing_apply' cable_pk=cable_pk %}" style="display:inline">
            {% csrf_token %}
            <input type="hidden" name="pathway_ids" value="{{ route.pathway_ids }}">
            <button type="submit" class="btn btn-sm btn-green"
                    {% if existing_segment_count %}onclick="return confirm('Replace {{ existing_segment_count }} existing segment{{ existing_segment_count|pluralize }}?')"{% endif %}>
                <i class="mdi mdi-cable-data"></i> Apply to Cable
            </button>
        </form>
        {% endif %}
        <form method="post" action="{% url 'plugins:netbox_pathways:route_planner_save' %}"
              class="d-flex gap-2 align-items-center" style="display:inline">
            {% csrf_token %}
            <input type="hidden" name="pathway_ids" value="{{ route.pathway_ids }}">
            <input type="hidden" name="start_structure" value="{{ start_structure_pk }}">
            <input type="hidden" name="end_structure" value="{{ end_structure_pk }}">
            {% if cable_pk %}<input type="hidden" name="cable_pk" value="{{ cable_pk }}">{% endif %}
            <input type="text" name="name" class="form-control form-control-sm"
                   placeholder="Route name..." required style="width: 140px;">
            <button type="submit" class="btn btn-sm btn-primary">
                <i class="mdi mdi-content-save"></i> Save
            </button>
        </form>
    </div>
</div>
{% endfor %}

{# Route geometry for map rendering #}
{% if route_geometry_json %}
<script type="application/json" id="route-geometry-data">{{ route_geometry_json|safe }}</script>
{% endif %}

{% else %}
<div class="pw-results-empty" style="padding: 20px 14px;">
    <i class="mdi mdi-alert-circle-outline" style="font-size: 1.5rem; opacity: 0.3;"></i>
    <p class="mt-1 mb-0">No route found with the given constraints.</p>
</div>
{% endif %}