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

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

{% block title %}
<H2>{{ IPAM_APPNAME|default:"IPAM - IP Management" }}</H2>
<hr>{% endblock %}




{% block content %}

<div class="d-flex">  <!-- BUTTONS -->
    {% if 'p_ipam_read' in aaa.perms %}
    <div class="flex me-2">
        <a class="btn btn-outline-secondary me-2" href="{% url 'app_data:instance_list' 'ipam_subnet' %}">
            <i class="fa fa-lg fa-map-marker"></i>&nbsp; 
            {% translate 'IP Subnets' %} ({{ count_subnet }})
            </a>
    </div>{% endif %}

    {% if 'p_ipam_read' in aaa.perms %}
    <div class="flex me-2">
        <a class="btn btn-outline-secondary me-2" href="{% url 'app_data:instance_list' 'ipam_vlan' %}">
            <i class="fa fa-lg fa-street-view"></i>&nbsp; 
            {% translate 'VLANs' %} ({{ count_vlan }})
            </a>
    </div>{% endif %}

    <div class="flex ms-auto me-2">
        <a class="btn btn-outline-secondary me-2" href="{% url 'app_ipam:calculator' %}">
            <i class="fa fa-lg fa-calculator"></i>&nbsp; 
            {% translate 'Calculator' %}
            </a>
    </div>
</div>

<hr>

<div class="d-flex"> <!-- SEARCH FILTER -->
    <div class="flex-grow-1 p-2">
        <form class="" style="display: inline-flex;" action="" method="GET">
            <button class="btn btn-success me-2" type="submit" id="search">
            <i class="fa fa-lg fa-search"></i>
            </button>
            <input type="text" class="form-control" style="display: inline;" size="120" 
                placeholder="{% translate 'Search...' %}" name="query" value="{{ query|default:'' }}">
        </form>
    </div>
</div>  



<HR>



{% if ip %}<!-- IP Information -->
<table class="table table-hover table-bordered table-sm">
    <tr class="table-primary">
        <td colspan="2">
            <strong>{% translate 'IP Information' %}</strong>
        </td>
    </tr>

    <tr>
        <td class="table-light" width="30%">
            IP
        </td>
        <td>
            <b>{{ ip.ip }}</b>
        </td>
    </tr>

    <tr>
        <td class="table-light" width="30%">
            Technical
        </td>
        <td>
            private: {{ip.is_private|yesno:"Yes,No,"}}<br>
            global: {{ip.is_global|yesno:"Yes,No,"}}<br>
            multicast: {{ip.is_multicast|yesno:"Yes,No,"}}<br>
            unspecified: {{ip.is_unspcified|yesno:"Yes,No,"}}<br>
            reserved: {{ip.is_reserved|yesno:"Yes,No,"}}<br>
            loopback: {{ip.is_loopback|yesno:"Yes,No,"}}<br>
            version:{{ip.version}}
        </td>
    </tr>
</table>
{% endif %}



{% if subnet %}<!-- current subnet -->
<table class="table table-hover table-bordered table-sm">
    <tr class="table-primary">
        <td colspan="2">
            <strong>{% translate 'Subnet Information' %}</strong>
        </td>
    </tr>
    <tr>
        <td class="table-light" width="30%">
            Subnet
        </td>
        <td>
            <b>{{ subnet.subnet }}</b><br>
            name: {{ subnet.description|default:''  }} <br>
            size: {{ subnet.size}}<br>
            netmask: {{ subnet.netmask}}<br>
            first: {{ subnet.first}}<br>
            last: {{ subnet.last}}<br>

        </td>
    </tr>
<!-- 
    <tr>
        <td class="table-light" width="30%">
            VLAN
        </td>
        <td>
            
        </td>
    </tr>

    <tr>
        <td class="table-light" width="30%">
            Site
        </td>
        <td>
        </td>
    </tr> -->

</table>
{% endif %}




{% if parent %} <!-- parent subnets -->
<table class="table table-hover table-bordered table-sm">
    <tr class="table-success">
        <td colspan="2">
            <strong>{% translate 'Parent subnets' %}</strong>
        </td>
    </tr>
{% for p in parent %}
    <tr>
        <td class="table-light" width="30%">
            {{ p }}
        </td>
        <td>
           {{ p.description|default:'' }}
        </td>
    </tr>
{% endfor %}

</table>    
{% endif %}


{% if child %}<!-- child subnets -->
<table class="table table-hover table-bordered table-sm">
    <tr class="table-success">
        <td colspan="2">
            <strong>{% translate 'Child subnets (depth max = 3)' %}</strong>
        </td>
    </tr>
{% for c in child %}
    <tr>
        <td class="table-light" width="30%">
            {{ c }}
        </td>
        <td>
            {{ c.description|default:'' }}
        </td>
    </tr>
{% endfor %}
</table>    
{% endif %}


{% if related %} <!-- Related Objects -->
<table class="table table-hover table-bordered table-sm">
    <tr class="table-warning">
        <td colspan="2">
            <strong>{% translate 'Related Objects' %}</strong>
        </td>
    </tr>

    {% for eav in related %}
    <tr>
        
        <td class="table-light" width="30%">
            {{ eav.classname }}
        </td>
        <td>
            <a class="btn btn-outline-success btn-sm mx-1 my-1" 
                href="{% url 'app_data:instance_detail' eav.classname eav.handle|default:eav.keyname %}" 
                role="button">
                {{ eav.displayname|default:eav.keyname }}</a>


        </td>
    </tr>
    {% endfor %}
</table>    
{% endif %}



{% endblock %}