{% extends 'generic/object.html' %}
{% load buttons %}
{% load helpers %}
{% load i18n %}

{% block breadcrumbs %}
  {{ block.super }}
  {% if object.vrf %}
    <li class="breadcrumb-item"><a href="{% url 'ipam:prefix_list' %}?vrf_id={{ object.vrf.pk }}">{{ object.vrf }}</a></li>
  {% endif %}
{% 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 p-0">
            <table class="table table-hover attr-table m-0">
              <tr>
                <th scope="row">{% trans "Network Address" %}</th>
                <td>{{ object.prefix.network }}</td>
              </tr>
              <tr>
                <th scope="row">{% trans "Network Mask" %}</th>
                <td>{{ object.prefix.netmask }}</td>
              </tr>
              <tr>
                <th scope="row">{% trans "Wildcard Mask" %}</th>
                <td>{{ object.prefix.hostmask }}</td>
              </tr>
              <tr>
                <th scope="row">{% trans "Broadcast Address" %}</th>
                <td>{{ object.prefix.broadcast }}</td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </div>
  {% endif %}
{% endblock modals %}