{% extends "app_home/base.html" %}
{% load static %}
{% load i18n %}

{% block navbar_app %}
{% include 'app_home/_sidebar.html' %}
{% endblock %}

{% block title %}
{% if vlan.instance %}
<h2>{% translate 'IPAM' %} - {% translate 'VLAN' %} - {{ vlan.displayname }}{% if vlan.description %} - {{ vlan.description }}{% endif %}</h2>
{% else %}
<h2>{% translate 'IPAM' %} - {% translate 'VLAN' %}</h2>
{% endif %}
<hr>{% endblock %}


{% block content %}

{% if error %}
<div class="alert alert-warning">{{ error }}</div>
{% endif %}

{% if vlan.instance %}

<div class="card mb-3">
  <div class="card-header cv-ipam-card-header">
    <i class="fa fa-street-view text-primary"></i>
    <span class="cv-ipam-card-title flex-grow-1">{{ vlan.displayname }}</span>
    <a class="btn btn-outline-secondary btn-sm" href="{% url 'app_data:instance_detail' vlan.instance.id %}">
        <i class="fa fa-file-text-o me-1"></i>{% translate 'Detail' %}
    </a>
    <a class="btn btn-outline-primary btn-sm" href="{% url 'app_data:instance_edit' vlan.instance.id %}">
        <i class="fa fa-pencil me-1"></i>{% translate 'Edit' %}
    </a>
  </div>
  <table class="table table-striped table-hover table-sm cv-ipam-table mb-0">
    <tr>
        <td class="text-muted" width="25%">{% translate 'keyname' %}</td>
        <td class="cv-ipam-value">{{ vlan.vlan }}</td>
    </tr>
    {% for page, pageitems in vlan_fields.PAGES.items %}{% for order, orderitems in pageitems.items %}{% for item in orderitems %}
    <tr>
        <td class="text-muted" width="25%">{{ item.displayname }}</td>
        <td>{% include 'app_data/fields/_datapoint.html' %}</td>
    </tr>
    {% endfor %}{% endfor %}{% endfor %}
  </table>
</div>

{% if vlan.subnet %}
<table class="table table-striped table-hover table-sm cv-ipam-table mb-3">
  <tr class="table-light"><th colspan="2">{% translate 'Subnet(s)' %}</th></tr>
  {% for s in vlan.subnet %}
  <tr>
    <td width="25%"><a class="cv-ipam-link" href="{% url 'app_ipam:subnet_view' %}?subnet={{ s.subnet }}">{{ s.subnet }}</a></td>
    <td><a class="cv-ipam-row-link" href="{% url 'app_ipam:subnet_view' %}?subnet={{ s.subnet }}">{{ s.description|default:'' }}</a></td>
  </tr>
  {% endfor %}
</table>
{% endif %}

{% endif %}

{% endblock %}