{% load humanize helpers i18n %}
<div class="card">
  <h2 class="card-header">
    {% trans "Addressing" %}
    {% if object.prefix.version == 4 %}
      <div class="card-actions">
        <a class="btn btn-ghost-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 %}
  </h2>
  <table class="table table-hover attr-table">
    {% with usage=object.get_ip_usage_summary %}
    <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 usage.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 %}
    <tr>
      <th scope="row">{% trans "Available IPs" %}</th>
      <td>
        {% if usage.available_ip_count > 1000000 %}
          {{ usage.available_ip_count|intword }}
        {% else %}
          {{ usage.available_ip_count|intcomma }}
        {% endif %}
      </td>
    </tr>
    <tr>
      <th scope="row">{% trans "First available IP" %}</th>
      <td>
        {% if usage.available_ip_count %}
          {% 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 %}
        {% else %}
          {{ ''|placeholder }}
        {% endif %}
      </td>
    </tr>
    {% endwith %}
  </table>
</div>