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

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

{% block title %}
{% if subnet %}
<h2>{% translate 'IPAM' %} - {% translate 'Subnet' %} - {{ subnet.subnet }}{% if subnet.description %} - {{ subnet.description }}{% endif %}</h2>
{% else %}
<h2>{% translate 'IPAM' %} - {% translate 'Subnet' %}</h2>
{% endif %}
<hr>{% endblock %}


{% block content %}

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

{% if aligned_note %}
<div class="alert alert-info">{% translate 'Aligned to subnet boundary:' %} <strong>{{ aligned_note }}</strong></div>
{% endif %}

{% if subnet %}

<div class="card mb-3">
  <div class="card-header cv-ipam-card-header">
    <i class="fa fa-map-marker text-primary"></i>
    <span class="cv-ipam-card-title flex-grow-1">{{ subnet.subnet }}</span>
    {% if subnet.instance %}
    <a class="btn btn-outline-secondary btn-sm" href="{% url 'app_data:instance_detail' subnet.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' subnet.instance.id %}">
        <i class="fa fa-pencil me-1"></i>{% translate 'Edit' %}
    </a>
    {% elif can_create_ipam_subnet %}
    <a class="btn btn-outline-secondary btn-sm" href="{% url 'app_data:instance_new' 'ipam_subnet' %}?keyname={{ subnet.subnet }}">
        <i class="fa fa-plus me-1"></i>{% translate 'Create IPAM record' %}
    </a>
    {% endif %}
  </div>
  <div class="card-body py-2">
    <div class="cv-ipam-stat-strip">
        <div class="cv-ipam-stat"><span class="cv-ipam-stat-label">{% translate 'first' %}</span><span class="cv-ipam-stat-value">{{ subnet.first }}</span></div>
        <div class="cv-ipam-stat"><span class="cv-ipam-stat-label">{% translate 'last' %}</span><span class="cv-ipam-stat-value">{{ subnet.last }}</span></div>
        <div class="cv-ipam-stat"><span class="cv-ipam-stat-label">{% translate 'mask' %}</span><span class="cv-ipam-stat-value">{{ subnet.netmask }}</span></div>
        <div class="cv-ipam-stat"><span class="cv-ipam-stat-label">{% translate 'cidr' %}</span><span class="cv-ipam-stat-value">/{{ subnet.prefixlen }}</span></div>
        <div class="cv-ipam-stat"><span class="cv-ipam-stat-label">{% translate 'size' %}</span><span class="cv-ipam-stat-value">{{ subnet.size }}</span></div>
        {% if occupancy.computed %}
        <div class="cv-ipam-stat"><span class="cv-ipam-stat-label">{% translate 'occupancy' %}</span><span class="cv-ipam-stat-value">{{ occupancy.count }} ({{ occupancy.percent }}%)</span></div>
        {% else %}
        <div class="cv-ipam-stat text-muted"><i class="fa fa-info-circle me-1"></i>{% blocktranslate %}Occupancy not computed above /{{ minprefix }}{% endblocktranslate %}</div>
        {% endif %}
    </div>
  </div>
  {% if subnet_fields %}
  <table class="table table-striped table-hover table-sm cv-ipam-table mb-0">
    {% for page, pageitems in subnet_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>
  {% endif %}
</div>

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

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

{% if vlans %}
<table class="table table-striped table-hover table-sm cv-ipam-table mb-3">
  <tr class="table-light"><th colspan="1">{% translate 'VLAN' %}</th></tr>
  {% for v in vlans %}
  <tr>
    <td><a class="cv-ipam-link" href="{% url 'app_ipam:vlan_view' %}?vlan={{ v.keyname }}">{{ v.displayname|default:v.keyname }}</a></td>
  </tr>
  {% endfor %}
</table>
{% endif %}

{% if occupancy.computed %}
<table class="table table-striped table-hover table-sm cv-ipam-table mb-3">
  <tr class="table-light"><th colspan="3">{% translate 'IP list' %}</th></tr>
  {% for row in ip_list %}
  <tr>
    <td class="cv-ipam-value" width="20%"><a class="cv-ipam-link" href="{% url 'app_ipam:ip_view' %}?ip={{ row.ip }}">{{ row.ip }}</a></td>
    <td class="text-muted" width="25%"><a class="cv-ipam-row-link" href="{% url 'app_ipam:ip_view' %}?ip={{ row.ip }}">{{ row.classname }}</a></td>
    <td><a class="cv-ipam-row-link" href="{% url 'app_ipam:ip_view' %}?ip={{ row.ip }}">{{ row.displayname|default:row.keyname }}</a></td>
  </tr>
  {% empty %}
  <tr><td colspan="3" class="text-muted"><i>{% translate 'No IP found in this subnet.' %}</i></td></tr>
  {% endfor %}
</table>

{% with pg_param="subnet" pg_value=subnet.subnet %}
{% include 'app_ipam/_paginator.html' %}
{% endwith %}
{% endif %}

{% endif %}

{% endblock %}