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

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

{% block title %}
<h2>{% translate 'IPAM - IP Management' %}</h2>
<hr>{% endblock %}


{% block content %}

<div class="card mb-3">
  <div class="card-body">
    <form class="cv-search-form" 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" size="120"
            placeholder="{% translate 'IPv4 address, subnet (10.1.2.0/24, or a prefix like 10.1.), or VLAN text search...' %}"
            name="query" value="{{ query|default:'' }}">
    </form>
  </div>
  {% if 'p_ipam_read' in aaa.perms %}
  <div class="list-group list-group-flush">

    <a href="{% url 'app_data:instance_list' 'ipam_ip' %}" class="list-group-item list-group-item-action d-flex align-items-center gap-3 cv-ipam-item">
      <div class="d-flex align-items-center justify-content-center rounded-circle bg-primary bg-opacity-10 text-primary cv-ipam-icon">
        <i class="fa fa-map-pin"></i>
      </div>
      <div class="flex-grow-1">
        <div class="fw-semibold">{% translate 'IPAM IPs' %}</div>
        <div class="text-muted cv-ipam-desc">{{ count_ip }} {% translate 'IPs' %}</div>
      </div>
      <i class="fa fa-chevron-right text-muted"></i>
    </a>

    <a href="{% url 'app_data:instance_list' 'ipam_subnet' %}" class="list-group-item list-group-item-action d-flex align-items-center gap-3 cv-ipam-item">
      <div class="d-flex align-items-center justify-content-center rounded-circle bg-primary bg-opacity-10 text-primary cv-ipam-icon">
        <i class="fa fa-map-marker"></i>
      </div>
      <div class="flex-grow-1">
        <div class="fw-semibold">{% translate 'IP Subnets' %}</div>
        <div class="text-muted cv-ipam-desc">{{ count_subnet }} {% translate 'subnets' %}</div>
      </div>
      <i class="fa fa-chevron-right text-muted"></i>
    </a>

    <a href="{% url 'app_data:instance_list' 'ipam_vlan' %}" class="list-group-item list-group-item-action d-flex align-items-center gap-3 cv-ipam-item">
      <div class="d-flex align-items-center justify-content-center rounded-circle bg-primary bg-opacity-10 text-primary cv-ipam-icon">
        <i class="fa fa-street-view"></i>
      </div>
      <div class="flex-grow-1">
        <div class="fw-semibold">{% translate 'VLANs' %}</div>
        <div class="text-muted cv-ipam-desc">{{ count_vlan }} {% translate 'VLANs' %}</div>
      </div>
      <i class="fa fa-chevron-right text-muted"></i>
    </a>

    <a href="{% url 'app_data:ipam_subnet_calculator' %}" class="list-group-item list-group-item-action d-flex align-items-center gap-3 cv-ipam-item">
      <div class="d-flex align-items-center justify-content-center rounded-circle bg-primary bg-opacity-10 text-primary cv-ipam-icon">
        <i class="fa fa-sitemap"></i>
      </div>
      <div class="flex-grow-1">
        <div class="fw-semibold">{% translate 'Subnet Calculator' %}</div>
        <div class="text-muted cv-ipam-desc">{% translate 'Interactive IP/CIDR subnet details and split' %}</div>
      </div>
      <i class="fa fa-chevron-right text-muted"></i>
    </a>

    <a href="{% url 'app_data:ipam_bandwidth_calculator' %}" class="list-group-item list-group-item-action d-flex align-items-center gap-3 cv-ipam-item">
      <div class="d-flex align-items-center justify-content-center rounded-circle bg-primary bg-opacity-10 text-primary cv-ipam-icon">
        <i class="fa fa-tachometer"></i>
      </div>
      <div class="flex-grow-1">
        <div class="fw-semibold">{% translate 'Bandwidth Calculator' %}</div>
        <div class="text-muted cv-ipam-desc">{% translate 'Estimate data transfer duration' %}</div>
      </div>
      <i class="fa fa-chevron-right text-muted"></i>
    </a>

  </div>
  {% endif %}
</div>

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

{% endblock %}