fix addressing details modal

netbox/templates/ipam/prefix/base.html

@@ -1,6 +1,7 @@
 {% extends 'generic/object.html' %}
 {% load buttons %}
 {% load helpers %}
+{% load i18n %}
 
 {% block breadcrumbs %}
   {{ block.super }}
@@ -8,3 +9,39 @@
     <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 %}