{% extends 'ipam/prefix/base.html' %}
{% load humanize %}
{% load helpers %}
{% 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 "Prefix" %}</h5>
      <div class="card-body">
        <table class="table table-hover attr-table">
          <tr>
            <th scope="row">{% trans "Family" %}</th>
            <td>IPv{{ object.family }}</td>
          </tr>
          <tr>
            <th scope="row">{% trans "VRF" %}</th>
            <td>
              {% if object.vrf %}
                <a href="{% url 'ipam:vrf' pk=object.vrf.pk %}">{{ object.vrf }}</a>
              {% else %}
                <span>{% trans "Global" %}</span>
              {% endif %}
            </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 "Aggregate" %}</th>
            <td>
              {% if aggregate %}
                <a href="{% url 'ipam:aggregate' pk=aggregate.pk %}">{{ aggregate.prefix }}</a> ({{ aggregate.rir }})
              {% else %}
                {{ ''|placeholder }}
              {% endif %}
            </td>
          </tr>
          {% 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 "VLAN" %}</th>
            <td>
              {% if object.vlan %}
                {% if object.vlan.group %}
                  {{ object.vlan.group|linkify }} /
                {% endif %}
                {{ object.vlan|linkify }}
              {% else %}
                {{ ''|placeholder }}
              {% endif %}
            </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>{{ object.role|linkify|placeholder }}</td>
          </tr>
          <tr>
            <th scope="row">{% trans "Description" %}</th>
            <td>{{ object.description|placeholder }}</td>
          </tr>
          <tr>
            <th scope="row">{% trans "Is a pool" %}</th>
            <td>{% checkmark object.is_pool %}</td>
          </tr>
        </table>
      </div>
    </div>
      {% plugin_left_page object %}
  </div>
  <div class="col col-md-6">
    <div class="card">
      <h5 class="card-header">{% trans "Addressing" %}</h5>
      <div class="card-body">
        <table class="table table-hover attr-table">
          <tr>
            <th scope="row">{% trans "Utilization" %}</th>
            <td>
              {% if object.mark_utilized %}
                {% utilization_graph 100 warning_threshold=0 danger_threshold=0 %}
                <small>({% trans "Marked fully utilized" %})</small>
              {% else %}
                {% utilization_graph object.get_utilization %}
              {% endif %}
            </td>
          </tr>
          {% with child_ip_count=object.get_child_ips.count %}
            <tr>
              <th scope="row">{% trans "Child IPs" %}</th>
              <td>
                <a href="{% url 'ipam:prefix_ipaddresses' pk=object.pk %}">{{ child_ip_count }}</a>
              </td>
            </tr>
          {% endwith %}
          {% with available_count=object.get_available_ips.size %}
            <tr>
              <th scope="row">{% trans "Available IPs" %}</th>
              <td>
                {# Use human-friendly words for counts greater than one million #}
                {% if available_count > 1000000 %}
                  {{ available_count|intword }}
                {% else %}
                  {{ available_count|intcomma }}
                {% endif %}
              </td>
            </tr>
          {% endwith %}
          <tr>
            <td>{% trans "First available IP" %}</td>
            <td>
              {% with first_available_ip=object.get_first_available_ip %}
                {% if first_available_ip %}
                  {% if perms.ipam.add_ipaddress %}
                    <a href="{% url 'ipam:ipaddress_add' %}?address={{ first_available_ip }}{% if object.vrf %}&vrf={{ object.vrf_id }}{% endif %}{% if object.tenant %}&tenant={{ object.tenant.pk }}{% endif %}">{{ first_available_ip }}</a>
                  {% else %}
                    {{ first_available_ip }}
                  {% endif %}
                {% else %}
                  {{ ''|placeholder }}
                {% endif %}
              {% endwith %}
            </td>
          </tr>
        </table>
        {% if object.prefix.version == 4 %}
          <div class="float-end">
            <a class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#prefix-modal">
              <i class="mdi mdi-information-outline" aria-hidden="true"></i> {% trans "Addressing Details" %}
            </a>
          </div>
        {% endif %}
      </div>
    </div>
    {% 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">
        {% if duplicate_prefix_table.rows %}
            {% include 'inc/panel_table.html' with table=duplicate_prefix_table heading='Duplicate Prefixes' %}
        {% endif %}
        {% include 'inc/panel_table.html' with table=parent_prefix_table heading='Parent Prefixes' %}
        {% plugin_full_width_page object %}
    </div>
</div>
{% endblock %}

{% block modals %}
  {{ block.super }}
  {% if object.prefix.version == 4 %}
    <div class="modal fade" id="prefix-modal" tabindex="-1" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">{% trans "Prefix Details" %}</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <table class="table table-hover attr-table">
              <tr>
                <td>{% trans "Network Address" %}</td>
                <td>{{ object.prefix.network }}</td>
              </tr>
              <tr>
                <td>{% trans "Network Mask" %}</td>
                <td>{{ object.prefix.netmask }}</td>
              </tr>
              <tr>
                <td>{% trans "Wildcard Mask" %}</td>
                <td>{{ object.prefix.hostmask }}</td>
              </tr>
              <tr>
                <td>{% trans "Broadcast Address" %}</td>
                <td>{{ object.prefix.broadcast }}</td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </div>
  {% endif %}
{% endblock %}