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

{% block title %}Bridge matrix{% endblock %}

{% block content %}
<div class="row">
  <div class="col col-md-12">
    <div class="card">
      <h2 class="card-header d-flex justify-content-between align-items-center">
        <span>Bridge matrix</span>
        <a href="{% url 'plugins:netbox_autocabling:allowedbridge_bulk_import' %}"
           class="btn btn-sm btn-primary">
          <i class="mdi mdi-upload"></i> Import CSV
        </a>
      </h2>
      <div class="card-body">
        <p class="text-muted small">
          Set which racks of a room may be joined by a direct cord: a bridge between two
          backbone segments, a satellite rack reaching a neighbour's panel, a saturated
          rack borrowing a neighbour's capacity, or a last-resort direct cable between two
          devices. A room
          with no allowed pair is <strong>open</strong> — every pair may be joined; adding pairs
          makes it <strong>restricted</strong> to exactly those pairs.
        </p>
        <form method="get" class="row g-2 align-items-end">
          <div class="col-auto">
            <label class="form-label mb-0">Site</label>
            <select name="site" class="form-select" onchange="this.form.submit()">
              <option value="">— choose a site —</option>
              {% for s in sites %}
                <option value="{{ s.pk }}" {% if site and s.pk == site.pk %}selected{% endif %}>{{ s.name }}</option>
              {% endfor %}
            </select>
          </div>
          {% if site %}
          <div class="col-auto">
            <label class="form-label mb-0">Room</label>
            <select name="location" class="form-select" onchange="this.form.submit()">
              <option value="">— choose a room —</option>
              {% for l in locations %}
                <option value="{{ l.pk }}" {% if location and l.pk == location.pk %}selected{% endif %}>{{ l.name }}</option>
              {% endfor %}
            </select>
          </div>
          {% endif %}
        </form>
      </div>
    </div>
  </div>
</div>

{% if location %}
<div class="row mt-3">
  <div class="col col-md-12">
    <div class="card">
      <h2 class="card-header">{{ location.name }}</h2>
      <div class="card-body">
        {% if error %}
          <div class="alert alert-danger">{{ error }}</div>
        {% endif %}
        {% if racks|length < 2 %}
          <p class="text-muted">This room has fewer than two racks — no pair to bridge.</p>
        {% else %}
        <form method="post">
          {% csrf_token %}
          <input type="hidden" name="site" value="{{ site.pk }}">
          <input type="hidden" name="location" value="{{ location.pk }}">
          <div class="mb-3">
            <div class="form-check form-check-inline">
              <input class="form-check-input" type="radio" name="mode" id="mode-open"
                     value="open" {% if not restricted %}checked{% endif %}
                     onchange="bmSetMode(true)">
              <label class="form-check-label" for="mode-open">Open — all pairs may be joined</label>
            </div>
            <div class="form-check form-check-inline">
              <input class="form-check-input" type="radio" name="mode" id="mode-restricted"
                     value="restricted" {% if restricted %}checked{% endif %}
                     onchange="bmSetMode(false)">
              <label class="form-check-label" for="mode-restricted">Restricted — only the ticked pairs</label>
            </div>
          </div>
          <div id="matrix" class="table-responsive {% if not restricted %}opacity-50{% endif %}">
            <table class="table table-bordered text-center align-middle" style="width:auto">
              <thead>
                <tr>
                  <th></th>
                  {% for c in racks %}<th class="font-monospace small">{{ c.name }}</th>{% endfor %}
                </tr>
              </thead>
              <tbody>
                {% for row in grid %}
                <tr>
                  <th class="font-monospace small text-end">{{ row.rack.name }}</th>
                  {% for cell in row.cells %}
                    {% if cell.active %}
                      <td>
                        {% comment %} a locked cell is a pair this user's own save could not write — the
                           racks are outside their scope, or their add/delete rights are — so it
                           is never tickable. A locked cell that is already ticked posts its
                           state back in a hidden field: a disabled checkbox submits nothing,
                           which would read as "untick it" and warn about a deletion the user
                           never asked for and could not have made. {% endcomment %}
                        {% if cell.locked and cell.checked %}
                          <input type="hidden" name="pair_{{ cell.key }}" value="on">
                        {% endif %}
                        <input class="form-check-input" type="checkbox"
                               name="pair_{{ cell.key }}" {% if cell.checked %}checked{% endif %}
                               {% if cell.locked %}data-locked="1"{% endif %}
                               {% if not restricted or cell.locked %}disabled{% endif %}
                               {% if cell.locked %}title="Outside your permitted scope"{% endif %}
                               aria-label="Bridge {{ row.rack.name }} ↔ {{ cell.col }}">
                      </td>
                    {% else %}
                      <td class="bg-body-secondary"></td>
                    {% endif %}
                  {% endfor %}
                </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
          <button type="submit" class="btn btn-primary mt-2">Save</button>
        </form>
        {% endif %}
      </div>
    </div>
  </div>
</div>

<script>
  // Open mode = the whole room is bridgeable; the grid is inert (greyed + checkboxes
  // disabled so nothing is tickable). Restricted mode re-enables it — except the cells locked
  // server-side, which touch a rack outside this user's write scope and must stay inert.
  function bmSetMode(open) {
    var m = document.getElementById('matrix');
    if (!m) return;
    m.classList.toggle('opacity-50', open);
    m.querySelectorAll('input[type=checkbox]').forEach(function (c) {
      c.disabled = open || c.dataset.locked === '1';
    });
  }
</script>
{% endif %}
{% endblock %}