{% extends 'ipam/vlan/base.html' %}
{% load helpers %}
{% load render_table from django_tables2 %}
{% load plugins %}
{% load i18n %}
{% load mptt %}

{% block content %}
    <div class="row">
        <div class="col col-md-6">
            <div class="card">
                <h5 class="card-header">{% trans "VLAN" %}</h5>
                <table class="table table-hover attr-table">
                    {% if object.site.region %}
                        <tr>
                            <th scope="row">{% trans "Region" %}</th>
                            <td>
                                {% nested_tree object.site.region %}
                            </td>
                        </tr>
                    {% endif %}
                    <tr>
                        <th scope="row">{% trans "Site" %}</th>
                        <td>{{ object.site|linkify|placeholder }}</td>
                    </tr>
                    <tr>
                        <th scope="row">{% trans "Group" %}</th>
                        <td>{{ object.group|linkify|placeholder }}</td>
                    </tr>
                    <tr>
                        <th scope="row">{% trans "VLAN ID" %}</th>
                        <td>{{ object.vid }}</td>
                    </tr>
                    <tr>
                        <th scope="row">{% trans "Name" %}</th>
                        <td>{{ object.name }}</td>
                    </tr>
                    <tr>
                        <th scope="row">{% trans "Tenant" %}</th>
                        <td>
                            {% if object.tenant.group %}
                                {{ object.tenant.group|linkify }} /
                            {% endif %}
                            {{ object.tenant|linkify|placeholder }}
                        </td>
                    </tr>
                    <tr>
                        <th scope="row">{% trans "Status" %}</th>
                        <td>{% badge object.get_status_display bg_color=object.get_status_color %}</td>
                    </tr>
                    <tr>
                        <th scope="row">{% trans "Role" %}</th>
                        <td>
                            {% if object.role %}
                                <a href="{% url 'ipam:vlan_list' %}?role={{ object.role.slug }}">{{ object.role }}</a>
                            {% else %}
                                {{ ''|placeholder }}
                            {% endif %}
                        </td>
                    </tr>
                    <tr>
                        <th scope="row">{% trans "Description" %}</th>
                        <td>{{ object.description|placeholder }}</td>
                    </tr>
                    <tr>
                      <th scope="row">{% trans "L2VPN" %}</th>
                      <td>{{ object.l2vpn_termination.l2vpn|linkify|placeholder }}</td>
                    </tr>
                </table>
            </div>
            {% plugin_left_page object %}
        </div>
        <div class="col col-md-6">
          {% include 'inc/panels/custom_fields.html' %}
          {% include 'inc/panels/tags.html' %}
          {% include 'inc/panels/comments.html' %}
          {% plugin_right_page object %}
        </div>
    </div>
    <div class="row">
      <div class="col col-md-12">
        <div class="card">
          <h5 class="card-header">
            {% trans "Prefixes" %}
            {% if perms.ipam.add_prefix %}
              <div class="card-actions">
                <a href="{% url 'ipam:prefix_add' %}?{% if object.tenant %}tenant={{ object.tenant.pk }}&{% endif %}site={{ object.site.pk }}&vlan={{ object.pk }}" class="btn btn-ghost-primary btn-sm">
                  <i class="mdi mdi-plus-thick" aria-hidden="true"></i> {% trans "Add a Prefix" %}
                </a>
              </div>
            {% endif %}
          </h5>
          {% htmx_table 'ipam:prefix_list' vlan_id=object.pk %}
        </div>
        {% plugin_full_width_page object %}
      </div>
    </div>
{% endblock %}