{% extends 'base/layout.html' %}
{% load helpers %}

{% block title %}Auto-cable two ports{% endblock %}

{% block content %}
<div class="row">
  <div class="col col-md-6">
    <div class="card">
      <h2 class="card-header">Auto-cable two ports</h2>
      <div class="card-body">
        {# hide only the outlet slot mid-request (Select2 flashes a stale value); the port is a native <select> that swaps instantly #}
        <style>#outlet-a-region.htmx-request .ac-outlet-slot,
               #outlet-b-region.htmx-request .ac-outlet-slot { display: none; }</style>
        <form method="post" action="{% url 'plugins:netbox_autocabling:autocable' %}">
          {% csrf_token %}
          {% for f in form.non_field_errors %}<div class="alert alert-danger">{{ f }}</div>{% endfor %}
          <div class="mb-3">{{ form.device_a.label_tag }} {{ form.device_a }}{{ form.device_a.errors }}</div>
          {# aggregated port picker: APISelect on the device-ports API, filtered live by device+media (no HTMX) #}
          <div class="mb-3">{{ form.port_a.label_tag }} {{ form.port_a }}{{ form.port_a.errors }}</div>
          {# outlet picker: revealed only for a rackless device — re-renders on device change #}
          <div id="outlet-a-region"
               hx-get="{% url 'plugins:netbox_autocabling:autocable_endpoint' %}?side=a&part=outlet"
               hx-trigger="change from:#id_device_a"
               hx-include="#id_device_a"
               hx-target="#outlet-a-region" hx-swap="innerHTML">
            {% include "netbox_autocabling/inc/_outlet.html" with outlet_device_field=form.outlet_device_a outlet_field=form.outlet_a show_outlet=show_outlet_a %}
          </div>
          <div class="mb-3">{{ form.device_b.label_tag }} {{ form.device_b }}{{ form.device_b.errors }}</div>
          <div class="mb-3">{{ form.port_b.label_tag }} {{ form.port_b }}{{ form.port_b.errors }}</div>
          <div id="outlet-b-region"
               hx-get="{% url 'plugins:netbox_autocabling:autocable_endpoint' %}?side=b&part=outlet"
               hx-trigger="change from:#id_device_b"
               hx-include="#id_device_b"
               hx-target="#outlet-b-region" hx-swap="innerHTML">
            {% include "netbox_autocabling/inc/_outlet.html" with outlet_device_field=form.outlet_device_b outlet_field=form.outlet_b show_outlet=show_outlet_b %}
          </div>
          <div class="mb-3">{{ form.media.label_tag }} {{ form.media }}{{ form.media.errors }}</div>
          <button type="submit" class="btn btn-primary">Compute the plan →</button>
        </form>
      </div>
    </div>
  </div>
</div>

{% if routes %}
<div class="row mt-3">
  <div class="col col-md-8">
    <div class="card">
      <h2 class="card-header">Candidate routes</h2>
      <div class="card-body">
        <p class="text-muted mb-2">Pick a route — the Cabling plan below updates to match; create it with the plan's button.</p>
        <form method="post" action="{% url 'plugins:netbox_autocabling:autocable' %}"
              hx-post="{% url 'plugins:netbox_autocabling:autocable_plan_card' %}"
              hx-trigger="change" hx-target="#cabling-plan" hx-swap="outerHTML">
          {% csrf_token %}
          <input type="hidden" name="device_a" value="{{ form.device_a.value }}">
          <input type="hidden" name="port_a" value="{{ form.port_a.value }}">
          <input type="hidden" name="device_b" value="{{ form.device_b.value }}">
          <input type="hidden" name="port_b" value="{{ form.port_b.value }}">
          <input type="hidden" name="media" value="{{ form.media.value }}">
          <table class="table table-hover align-middle">
            <thead>
              <tr><th></th><th>Route</th><th>Hops</th><th>Cables</th><th>Path</th><th>Free</th></tr>
            </thead>
            <tbody>
              {% for route in routes %}
                <tr{% if route.recommended %} class="table-success"{% endif %}>
                  <td>
                    <input type="radio" name="route_id" value="{{ route.route_id }}"
                           {% if route.route_id == selected_route_id %}checked{% endif %}>
                  </td>
                  <td class="text-nowrap">
                    #{{ route.n }}{% if route.recommended %} <span class="text-green">★</span>{% endif %}
                  </td>
                  <td>{{ route.hops }} hop{{ route.hops|pluralize }}</td>
                  <td class="text-nowrap"
                      title="Cables to create: one at each end, one per rack passed through, minus one per bridge">
                    {{ route.n_cables }} cable{{ route.n_cables|pluralize }}</td>
                  <td>
                    <span class="d-inline-flex flex-wrap align-items-center" style="gap:.2rem;">
                      {% for r in route.racks %}
                        <span class="badge bg-gray-200 text-dark border font-monospace">{{ r }}</span>
                        {% if not forloop.last %}<span class="text-muted">→</span>{% endif %}
                      {% endfor %}
                      {% if route.n_bridges %}
                        <span class="badge text-bg-orange"
                              title="Needs {{ route.n_bridges }} cable(s) to pull">
                          {{ route.n_bridges }} bridge{{ route.n_bridges|pluralize }}</span>
                      {% endif %}
                    </span>
                  </td>
                  <td class="text-nowrap">{{ route.free_capacity }} fiber{{ route.free_capacity|pluralize }} free</td>
                </tr>
              {% endfor %}
            </tbody>
          </table>
          <noscript><button type="submit" class="btn btn-outline-secondary btn-sm">Update the plan ↻</button></noscript>
        </form>
      </div>
    </div>
  </div>
</div>
{% endif %}

{% include "netbox_autocabling/_plan_card.html" %}
{% endblock %}