{% if segments %}
<table class="table table-hover table-sm mb-0">
  <thead>
    <tr>
      <th>#</th>
      <th>Pathway</th>
      <th>Type</th>
      <th>From</th>
      <th>To</th>
      <th>Length</th>
      <th class="text-end">Actions</th>
    </tr>
  </thead>
  <tbody>
    {% for seg in segments %}
    {% if seg.gap_before %}
    <tr class="pw-gap-row">
      <td colspan="5" class="text-center text-muted">
        <i class="mdi mdi-alert-outline text-red"></i> <span class="text-red">Gap</span>
      </td>
      <td colspan="2" class="text-end d-print-none">
        <div class="d-flex gap-1 justify-content-end">
          {% if seg.gap_start_pk and seg.gap_end_pk %}
          <a href="/plugins/pathways/route-planner/?cable={{ cable.pk }}&start={{ seg.gap_start_pk }}&end={{ seg.gap_end_pk }}"
             class="btn btn-sm btn-primary" title="Plan route for this gap">
            <i class="mdi mdi-map-search-outline"></i>
          </a>
          {% endif %}
          <button class="btn btn-sm btn-green"
                  hx-get="/plugins/pathways/cable-routing/{{ cable.pk }}/add-segment/?after_sequence={{ seg.prev_sequence }}"
                  hx-target="#pw-segment-table"
                  hx-swap="innerHTML"
                  title="Insert segment">
            <i class="mdi mdi-plus"></i>
          </button>
        </div>
      </td>
    </tr>
    {% endif %}
    <tr>
      <td>{{ seg.ordinal }}</td>
      <td>
        {% if seg.pathway %}
          <a href="{{ seg.pathway.get_absolute_url }}">{{ seg.pathway }}</a>
        {% else %}
          <span class="text-muted">&mdash;</span>
        {% endif %}
      </td>
      <td>{{ seg.pathway.get_pathway_type_display|default:"&mdash;" }}</td>
      <td>{{ seg.start_name|default:"&mdash;" }}</td>
      <td>{{ seg.end_name|default:"&mdash;" }}</td>
      <td>{% if seg.pathway and seg.pathway.length %}{{ seg.pathway.length|floatformat:1 }}{% else %}&mdash;{% endif %}</td>
      <td class="text-end d-print-none">
        <button class="btn btn-sm btn-red"
                hx-post="/plugins/pathways/cable-routing/{{ cable.pk }}/delete-segment/{{ seg.pk }}/"
                hx-target="#pw-segment-table"
                hx-swap="innerHTML"
                hx-confirm="Delete this segment?"
                hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
                title="Delete">
          <i class="mdi mdi-trash-can-outline"></i>
        </button>
      </td>
    </tr>
    {% endfor %}
  </tbody>
</table>

<div class="mt-2 d-flex gap-2">
  <button class="btn btn-sm btn-green"
          hx-get="/plugins/pathways/cable-routing/{{ cable.pk }}/add-segment/"
          hx-target="#pw-segment-table"
          hx-swap="innerHTML"
          title="Add segment at end">
    <i class="mdi mdi-plus"></i> Add Segment
  </button>
  <a href="/plugins/pathways/route-planner/?cable={{ cable.pk }}" class="btn btn-sm btn-primary">
    <i class="mdi mdi-map-search-outline"></i> Plan Route
  </a>
</div>

{% else %}
<div class="text-center text-muted py-3">
  <p>No segments in this cable's route.</p>
  <div class="d-flex justify-content-center gap-2">
    <button class="btn btn-sm btn-green"
            hx-get="/plugins/pathways/cable-routing/{{ cable.pk }}/add-segment/"
            hx-target="#pw-segment-table"
            hx-swap="innerHTML">
      <i class="mdi mdi-plus"></i> Add First Segment
    </button>
    <a href="/plugins/pathways/route-planner/?cable={{ cable.pk }}" class="btn btn-sm btn-primary">
      <i class="mdi mdi-map-search-outline"></i> Plan Route
    </a>
  </div>
</div>
{% endif %}