{# SPDX-License-Identifier: Apache-2.0 #}
{# Copyright (C) 2025 Marcin Zieba <marcinpsk@gmail.com> #}
{% extends 'base/layout.html' %}

{% block title %}Attach VLAN — {{ object }}{% endblock %}

{% block content %}
<div class="row">
  <div class="col col-md-8 offset-md-2">
    <div class="card">
      <h5 class="card-header">Attach VLAN to {{ object }}</h5>
      <div class="card-body">
        <p class="text-muted">
          Attach an existing VLAN to <strong>{{ object }}</strong>. The device↔VLAN link is the overlay,
          <strong>not</strong> the VLAN group — so the same shared VLAN can be attached to several devices and a
          rename then propagates to all of them. The vid + name are written to the device on the next <strong>Apply</strong>.
          To create a brand-new VLAN first, use IPAM → VLANs (put it in a shared group, not a per-device <code>nso-*</code> group).
        </p>

        {% if vlans %}
        <form method="post">
          {% csrf_token %}
          <div class="mb-3">
            <label class="form-label" for="vlan">VLAN</label>
            <select class="form-select" id="vlan" name="vlan" required>
              {% for v in vlans %}
                <option value="{{ v.pk }}">{{ v.vid }} — {{ v.name|default:"(unnamed)" }} [{{ v.group|default:"no group" }}]</option>
              {% endfor %}
            </select>
          </div>
          <button type="submit" class="btn btn-primary">Attach</button>
          <a href="{% url 'dcim:device_nso' pk=object.pk %}" class="btn btn-outline-secondary">Cancel</a>
        </form>
        {% else %}
          <p class="text-warning mb-0">No unattached VLANs available. Create one first (IPAM → VLANs).</p>
        {% endif %}
      </div>
    </div>
  </div>
</div>
{% endblock %}