{% load i18n %}
<table class="table panel-body">
    <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" />
                </td>
                <td>
                    <input type="checkbox" name="tagged_vlans" value="{{ obj.untagged_vlan.pk }}" />
                </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 %} />
                </td>
                <td>
                    <input type="checkbox" name="tagged_vlans" value="{{ vlan.pk }}" checked="checked" />
                </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 btn-sm">{% trans "Clear" %}</a>
                </td>
                <td>
                    <a href="#" id="clear_tagged_vlans" class="btn btn-warning btn-sm">{% trans "Clear All" %}</a>
                </td>
            </tr>
        {% endif %}
    {% endwith %}
</table>