{% load i18n %}
<table class="table">
    <tr>
        <th>{% trans "VID" %}</th>
        <th>{% trans "Name" %}</th>
        <th>{% trans "Untagged" %}</th>
        <th>{% trans "Tagged" %}</th>
    </tr>
    {% with tagged_vlans=obj.tagged_vlans.all %}
        {% if obj.untagged_vlan and obj.untagged_vlan not in tagged_vlans %}
            <tr>
                <td>{{ obj.untagged_vlan|linkify:"vid" }}</td>
                <td>{{ obj.untagged_vlan.name }}</td>
                <td>
                    <input type="radio" name="untagged_vlan" value="{{ obj.untagged_vlan.pk }}" checked="checked" aria-label="{% blocktrans with vid=obj.untagged_vlan.vid name=obj.untagged_vlan.name %}Set VLAN {{ vid }} ({{ name }}) as untagged{% endblocktrans %}" />
                </td>
                <td>
                    <input type="checkbox" name="tagged_vlans" value="{{ obj.untagged_vlan.pk }}" aria-label="{% blocktrans with vid=obj.untagged_vlan.vid name=obj.untagged_vlan.name %}Tag VLAN {{ vid }} ({{ name }}){% endblocktrans %}" />
                </td>
            </tr>
        {% endif %}
        {% for vlan in tagged_vlans %}
            <tr>
                <td>{{ vlan|linkify:"vid" }}</td>
                <td>{{ vlan.name }}</td>
                <td>
                    <input type="radio" name="untagged_vlan" value="{{ vlan.pk }}"{% if vlan == obj.untagged_vlan %} checked="checked"{% endif %} aria-label="{% blocktrans with vid=vlan.vid name=vlan.name %}Set VLAN {{ vid }} ({{ name }}) as untagged{% endblocktrans %}" />
                </td>
                <td>
                    <input type="checkbox" name="tagged_vlans" value="{{ vlan.pk }}" checked="checked" aria-label="{% blocktrans with vid=vlan.vid name=vlan.name %}Tag VLAN {{ vid }} ({{ name }}){% endblocktrans %}" />
                </td>
            </tr>
        {% endfor %}
        {% if not obj.untagged_vlan and not tagged_vlans %}
            <tr>
                <td colspan="4" class="text-muted text-center">
                    {% trans "No VLANs Assigned" %}
                </td>
            </tr>
        {% else %}
            <tr>
                <td colspan="2"></td>
                <td>
                    <a href="#" id="clear_untagged_vlan" class="btn btn-outline-warning">{% trans "Clear" %}</a>
                </td>
                <td>
                    <a href="#" id="clear_tagged_vlans" class="btn btn-warning">{% trans "Clear All" %}</a>
                </td>
            </tr>
        {% endif %}
    {% endwith %}
</table>
