{% extends 'ipam/prefix/base.html' %}
{% load humanize %}
{% load helpers %}
{% load plugins %}

{% block content %}
<div class="row">
  <div class="col col-md-6">
    <div class="card">
      <h5 class="card-header">Prefix</h5>
      <div class="card-body">
        <table class="table table-hover attr-table">
          <tr>
            <th scope="row">Family</th>
            <td>IPv{{ object.family }}</td>
          </tr>
          <tr>
            <th scope="row">VRF</th>
            <td>
              {% if object.vrf %}
                <a href="{% url 'ipam:vrf' pk=object.vrf.pk %}">{{ object.vrf }}</a>
              {% else %}
                <span>Global</span>
              {% endif %}
            </td>
          </tr>
          <tr>
            <th scope="row">Tenant</th>
              <td>
                {% if object.tenant.group %}
                  {{ object.tenant.group|linkify }} /
                {% endif %}
                {{ object.tenant|linkify|placeholder }}
              </td>
          </tr>
          <tr>
            <th scope="row">Aggregate</th>
            <td>
              {% if aggregate %}
                <a href="{% url 'ipam:aggregate' pk=aggregate.pk %}">{{ aggregate.prefix }}</a> ({{ aggregate.rir }})
              {% else %}
                {{ ''|placeholder }}
              {% endif %}
            </td>
          </tr>
          <tr>
            <th scope="row">Site</th>
            <td>
              {% if object.site %}
                {% if object.site.region %}
                  {{ object.site.region|linkify }} /
                {% endif %}
                {{ object.site|linkify }}
              {% else %}
                {{ ''|placeholder }}
              {% endif %}
            </td>
          </tr>
          <tr>
            <th scope="row">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">Status</th>
            <td>{% badge object.get_status_display bg_color=object.get_status_color %}</td>
          </tr>
          <tr>
            <th scope="row">Role</th>
            <td>{{ object.role|linkify|placeholder }}</td>
          </tr>
          <tr>
            <th scope="row">Description</th>
            <td>{{ object.description|placeholder }}</td>
          </tr>
          <tr>
            <th scope="row">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">Addressing</h5>
      <div class="card-body">
        <table class="table table-hover attr-table">
          <tr>
            <th scope="row">Utilization</th>
            <td>
              {% if object.mark_utilized %}
                {% utilization_graph 100 warning_threshold=0 danger_threshold=0 %}
                <small>(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">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">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>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 }}">{{ 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> 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">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>Network Address</td>
                <td>{{ object.prefix.network }}</td>
              </tr>
              <tr>
                <td>Network Mask</td>
                <td>{{ object.prefix.netmask }}</td>
              </tr>
              <tr>
                <td>Wildcard Mask</td>
                <td>{{ object.prefix.hostmask }}</td>
              </tr>
              <tr>
                <td>Broadcast Address</td>
                <td>{{ object.prefix.broadcast }}</td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </div>
  {% endif %}
{% endblock %}