irie 0.0.4__py3-none-any.whl → 0.0.6__py3-none-any.whl

irie/apps/templates/inventory/asset-event-summary.html

@@ -20,9 +20,10 @@
     <div class="py-4 align-right">
       <a role="button" class="button btn btn-outline-primary"
          href="/inventory/{{ asset.calid }}" class="me-1">Structure Profile</a>
-    {% comment %}
+
       {% include 'includes/modal-report.html' with event_summaries=event_summaries %}
-    {% endcomment %}
+      {% comment %}
+      {% endcomment %}
     </div>
 
     {# BRIDGE RENDER #}

irie/apps/templates/inventory/asset-profile.html

@@ -3,6 +3,12 @@
 {% block title %} {{ asset.calid }} {% endblock %} 
 
 {% block stylesheets %}
+{% if asset.rendering %}
+<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
+<!-- <script src="https://unpkg.com/three@0.152.0/build/three.min.js"></script> -->
+<script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/4.0.0/model-viewer.min.js"></script>
+<!-- <script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script> -->
+{% endif %}
 <style>
 @media print {
   @page {
@@ -91,22 +97,75 @@
   stroke: #61DAFB;
 }
 </style>
+
+<script src="https://cdn.plot.ly/plotly-2.27.0.min.js" charset="utf-8"></script>
 {% endblock stylesheets %}
 
 {% block content %}
 <div class="print">
-    <h1 class="fs-2 lh-2 me-3"><code>{{ asset.calid }}</code> {{ asset.name }}</h1>
-    <span id="structureProfile" class="fs-2 lh-2 me-3">Structure Profile</span>
-
+    <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center py-4">
+      <div class="d-block mb-4 mb-md-0">
+          <nav aria-label="breadcrumb" class="d-none d-md-inline-block">
+            <ol class="breadcrumb breadcrumb-dark breadcrumb-transparent">
+              <li class="breadcrumb-item">
+                <a href="/">
+                  <svg class="icon icon-xxs" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path></svg>
+                </a>
+              </li>
+              <li class="breadcrumb-item"><a href="{% url 'dashboard' %}">BRACE<sup>2</sup></a></li>
+              <li class="breadcrumb-item" aria-current="page">Inventory</li>
+              <li class="breadcrumb-item active"><code>{{ asset.calid }}</code></li>
+            </ol>
+          </nav>
+          <h2 class="h4">{{ asset.name }}</h2>
+      </div>
+      <div class="btn-toolbar mb-2 mb-md-0">
+        <a role="button" 
+           href="/inventory/{{ asset.calid }}/predictors/"
+           class="btn btn-sm btn-gray-800 d-inline-flex align-items-center">
+          <svg class="icon icon-xs me-2" fill="none" 
+              stroke="currentColor" viewBox="0 0 24 24" 
+              xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path></svg>
+              Predictors
+        </a>
+      </div>
+    </div>
+    <!-- <h1 class="fs-2 lh-2 me-3"></h1> -->
+    <!-- <span id="structureProfile" class="fs-2 lh-2 me-3">Structure Profile</span> -->
+    <!--
     <div class="py-4 align-right">
       <a role="button" class="button btn btn-outline-primary"
          href="/inventory/{{ asset.calid }}/predictors/" class="me-1">Configure Predictors</a>
     </div>
-
-    {% if asset.cesmd %}
+    -->
+    
     {# BRIDGE RENDERING #}
-    <details id="asset-sensors" open><summary><h3>Sensor Layout</h3></summary>
-    <div id="rendering" class="row">
+    <details id="asset-sensors" open><summary><h3>Geometry</h3></summary>
+      {% if asset.rendering %}
+      <div id="rendering" class="row">
+        <div class="col-10 mb-4">
+          <div class="card h-100 bg-white-100 border-0 shadow">
+            <div class="card-header d-sm-flex flex-row align-items-center flex-0">
+            </div>
+            <div class="card-body align-items-center">
+              <model-viewer 
+                id="viewer"
+                src="{{ asset.rendering }}" 
+                alt="3D Model" 
+                auto-rotate 
+                camera-controls
+                interaction-prompt="none"
+                camera-orbit="0deg 75deg 2m" 
+                field-of-view="30deg"
+                style="width: 100%; height: 400px;">
+              </model-viewer>
+            </div>
+          </div>
+        </div>
+      </div>
+      {% endif %}
+    {% if asset.cesmd %}
+    <div id="sensors" class="row">
       <div class="col-10 mb-4">
         <div class="card h-100 bg-white-100 border-0 shadow">
           <div class="card-header d-sm-flex flex-row align-items-center flex-0">
@@ -117,18 +176,44 @@
         </div>
       </div>
     </div>
-    </details>
     {% endif %}
+    </details>
+    
 
     {% if asset.cesmd %}
-    <details id="event-table" open><summary><h3>Event History</h3></summary>
-    <div class="row">
+    <details id="event-table" open><summary><h3>Health History</h3></summary>
+
+      <div class="row">
+          <div class="col-10 mb-4">
+            <div class="card bg-white-100 border-0 shadow table-wrapper table-responsive">
+      {% include 'includes/asset-event-table.html' with evaluations=evaluations %}
+            </div>
+          </div>
+      </div>
+
+      {# Hazus #}
+      <div class="row">
         <div class="col-10 mb-4">
-          <div class="card bg-white-100 border-0 shadow table-wrapper table-responsive">
-    {% include 'includes/asset-event-table.html' with evaluations=evaluations %}
+          <div class="card bg-white-100 border-0 shadow ">
+            <div class="card-header">
+              <h4>Hazus Fragility</h4>
+            </div>
+            <div class="card-body">
+              {% include "prediction/hazus/history.html" with hazus=hazus %}
+            </div>
           </div>
         </div>
-    </div>
+      </div>
+
+      {% if mountains %}
+      <div class="col-10 card bg-white-100 border-0 shadow mt-4">
+        <div class="card-body">
+          <h4>Mountains</h4>
+          <img src="data:image/jpeg;base64,{{ mountains }}" alt="Fragility Curve" style="max-width: 100%; height: auto;">
+        </div>
+      </div>
+      {% endif %}
+      
     </details>
     <hr>
     {% endif %}
@@ -139,31 +224,31 @@
     <details open><summary><h3>Structure Details</h3></summary>
 
     <div class="row">
-        <div class="col-10 mb-4">
-          {% for table in tables %}
-          <div class="card bg-white-100 border-0 shadow table-wrapper table-responsive">
-            <div class="card card-body shadow table-wrapper table-responsive">
-              <table class="table table-hover" style="display: block;">
-                <caption>{{asset.calid}} Table {{forloop.counter}}</caption>
-                {# <thead><tr><th>Key</th> <th>Value</th></tr></thead> #}
-                <tbody>
-                  {# <tr><td><b>CESMD</b></td><td>{{ asset_data.cesmd }}</td></tr> #}
-                  {% for key,val in table.items %}
-                  {% if val %}
-                  <tr>
-                    <th scope="row" style="text-align:left; width:40%;">{{ key }}</th>
-                    <!-- The inline style here ensures that 
-                         there are line breaks in rows with long text -->
-                    <td style="width: 60%; white-space: normal !important;word-wrap: break-word;">{{ val }}</td>
-                  </tr>
-                  {% endif %}
-                  {% endfor %}
-                </tbody>
-              </table>
-          </div>
+      <div class="col-10 mb-4">
+        {% for table in tables %}
+        <div class="card bg-white-100 border-0 shadow table-wrapper table-responsive">
+          <div class="card card-body shadow table-wrapper table-responsive">
+            <table class="table table-hover" style="display: block;">
+              <caption>{{asset.calid}} Table {{forloop.counter}}</caption>
+              {# <thead><tr><th>Key</th> <th>Value</th></tr></thead> #}
+              <tbody>
+                {# <tr><td><b>CESMD</b></td><td>{{ asset_data.cesmd }}</td></tr> #}
+                {% for key,val in table.items %}
+                {% if val %}
+                <tr>
+                  <th scope="row" style="text-align:left; width:40%;">{{ key }}</th>
+                  <!-- The inline style here ensures that 
+                        there are line breaks in rows with long text -->
+                  <td style="width: 60%; white-space: normal !important;word-wrap: break-word;">{{ val }}</td>
+                </tr>
+                {% endif %}
+                {% endfor %}
+              </tbody>
+            </table>
         </div>
-                  <br>
-              {% endfor %}
+      </div>
+      <br>
+      {% endfor %}
     </div>
     </details>
 
@@ -201,6 +286,10 @@
     };
   }
 </script>
+
+<script>
+  {% include "prediction/hazus/history.js" %}
+</script>
 <script type="text/javascript">
   function printTables() {
     var myWindow = window.open('','','width=200,height=100')
@@ -208,5 +297,4 @@
     myWindow.print();
   }
 </script>
-
 {% endblock javascripts %}

irie/apps/templates/inventory/asset-table.html

@@ -3,6 +3,8 @@
 {% block title %} Inventory {% endblock %}
 
 {% block stylesheets %}
+<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
+
 <style>
 table a[href^="http"]::after,
 table a[href^="https://"]::after
@@ -22,170 +24,224 @@ table a[href^="https://"]::after
 
 {% block content %}
   <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center py-4">
-      <div class="d-block mb-4 mb-md-0">
-          <nav aria-label="breadcrumb" class="d-none d-md-inline-block">
-            <ol class="breadcrumb breadcrumb-dark breadcrumb-transparent">
-              <li class="breadcrumb-item">
-                <a href="/">
-                  <svg class="icon icon-xxs" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path></svg>
-                </a>
-              </li>
-              <li class="breadcrumb-item"><a href="{% url 'dashboard' %}">BRACE2</a></li>
-              <li class="breadcrumb-item active" aria-current="page">Inventory</li>
-            </ol>
-          </nav>
-          <h2 class="h4">All Assets</h2>
-      </div>
-      <div class="btn-toolbar mb-2 mb-md-0">
-          <!-- <a href="#" class="btn btn-sm btn-gray-800 d-inline-flex align-items-center">
-              <svg class="icon icon-xs me-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path></svg>
-              New Plan
-          </a> -->
+    <div class="d-block mb-4 mb-md-0">
+        <nav aria-label="breadcrumb" class="d-none d-md-inline-block">
+          <ol class="breadcrumb breadcrumb-dark breadcrumb-transparent">
+            <li class="breadcrumb-item">
+              <a href="/">
+                <svg class="icon icon-xxs" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path></svg>
+              </a>
+            </li>
+            <li class="breadcrumb-item"><a href="{% url 'dashboard' %}">BRACE<sup>2</sup></a></li>
+            <li class="breadcrumb-item active" aria-current="page">Inventory</li>
+          </ol>
+        </nav>
+        <h2 class="h4">Inventory</h2>
+    </div>
+  </div>
 
-          <div class="btn-group ms-2 ms-lg-3">
-            <!-- <button type="button" class="btn btn-sm btn-outline-gray-600">Share</button> -->
-            <span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" data-bs-placement="left" title="Disabled">
-              <button type="button" class="btn btn-sm btn-outline-gray-600 style="pointer-events: none;" disabled>Export</button>
-            </span>
-            <!-- <span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" title="Disabled tooltip">
-                <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Export</button>
-            </span> -->
+  {# Content #}
+  <div class="row">
+    <div class="col-xl-4">
+      {# #}
+      <div class="card border-0 shadow">
+          <div class="card-header">
+            <div class="row align-items-center">
+            <div class="col">
+                <h2 class="fs-5 fw-bold mb-0">Search</h2>
+            </div>
+            </div>
           </div>
-      </div>
-  </div>
-          <div class="row">
-            <div class="col-12 my-4">
-              <div class="card bg-white-100 border-0 shadow">
-                <!-- <div class="card-header d-sm-flex flex-row align-items-center flex-0">
-                  <div class="d-block mb-3 mb-sm-0">
-                      <div class="fs-5 fw-normal mb-2">Inventory Map</div>
+    
+          <div class="card card-body border-0 shadow table-wrapper table-responsive">
+            <form method="get" class="row g-3 mb-4">
+              <!-- Search Field -->
+              <div class="input-group mb-3">
+                <span class="input-group-text">
+                    <svg class="icon icon-xs" x-description="Heroicon name: solid/search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                        <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path>
+                    </svg>
+                </span>
+                <button type="button" class="btn input-group-text btn-outline dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-down-fill" viewBox="0 0 16 16">
+                    <path d="M7.247 11.14l-4.796-5.481C2.014 5.334 2.482 4.5 3.25 4.5h9.5c.768 0 1.236.835.799 1.159l-4.796 5.481a1 1 0 0 1-1.506 0z"/>
+                  </svg>                  
+                  <span class="visually-hidden">Toggle Dropdown</span>
+                </button>
+                <ul class="dropdown-menu">
+                  <li><a class="dropdown-item" href="#">Include fields:</a></li>
+                  <li><hr class="dropdown-divider"></li>
+                  <li><div class="form-check form-switch">
+                    <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
+                    <label class="form-check-label" for="flexSwitchCheckDefault">ID</label>
+                  </div></li>
+                  <li><div class="form-check form-switch">
+                    <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckChecked" checked>
+                    <label class="form-check-label" for="flexSwitchCheckChecked">Name</label>
+                  </div></li>
+                  <li><div class="form-check form-switch">
+                    <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDisabled" >
+                    <label class="form-check-label" for="flexSwitchCheckDisabled">District</label>
+                  </div></li>
+                </ul>
+                <input 
+                  id="search" 
+                  name="search"
+                  type="text" 
+                  class="form-control" 
+                  value="{{ filter.form.search.value|default_if_none:'' }}" 
+                  placeholder="Search assets"
+                >
+              </div>
+          
+              <!-- CESMD Not Null Checkbox -->
+              <div class="col-12">
+                  <div class="form-check">
+                      <input 
+                          type="checkbox" 
+                          name="cesmd_not_null" 
+                          id="cesmd_not_null" 
+                          class="form-check-input" 
+                          {% if filter.form.cesmd_not_null.value %}checked{% endif %}>
+                      <label for="cesmd_not_null" class="form-check-label">
+                          {{ filter.form.cesmd_not_null.label }}
+                      </label>
                   </div>
-                </div> -->
-                <div class="card-body p-2">
-                  {{ asset_map|safe }}
-                </div>
               </div>
-            </div>
-          </div>
-  
-  <div class="table-settings mb-4">
-      <div class="row align-items-center justify-content-between">
-          <div class="col col-md-6 col-lg-3 col-xl-4">
-            <span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" data-bs-placement="right" title="Disabled">
-              <div class="input-group me-2 me-lg-3 fmxw-400">
-                  <span class="input-group-text">
-                      <svg class="icon icon-xs" x-description="Heroicon name: solid/search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                          <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path>
-                      </svg>
-                  </span>
-                  <input disabled type="text" class="form-control" placeholder="Search assets">
+          
+              {# Is Complete Checkbox #}
+              <div class="col-12">
+                  <div class="form-check">
+                      <input 
+                          type="checkbox" 
+                          name="is_complete" 
+                          id="is_complete" 
+                          class="form-check-input" 
+                          {% if filter.form.is_complete.value %}checked{% endif %}>
+                      <label for="is_complete" class="form-check-label">
+                          {{ filter.form.is_complete.label }}
+                      </label>
+                  </div>
               </div>
-            </span>
-          </div>
-          <!-- <div class="col-4 col-md-2 col-xl-1 ps-md-0 text-end">
-              <div class="dropdown">
-                  <button class="btn btn-link text-dark dropdown-toggle dropdown-toggle-split m-0 p-1" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                      <svg class="icon icon-sm" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd"></path></svg>
-                      <span class="visually-hidden">Toggle Dropdown</span>
+
+              {# Buttons #}
+              <div class="col-12 d-flex justify-content-between">
+                  <button type="submit" class="btn btn-primary">
+                      <i class="bi bi-search"></i> Apply 
                   </button>
-                  <div class="dropdown-menu dropdown-menu-xs dropdown-menu-end pb-0">
-                      <span class="small ps-3 fw-bold text-dark">Show</span>
-                      <a class="dropdown-item d-flex align-items-center fw-bold" href="#">10 <svg class="icon icon-xxs ms-auto" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg></a>
-                      <a class="dropdown-item fw-bold" href="#">20</a>
-                      <a class="dropdown-item fw-bold rounded-bottom" href="#">30</a>
-                  </div>
-              </div> -->
+                  <a href="{% url 'asset_table' %}" class="btn btn-gray-800">
+                      <i class="bi bi-x-circle"></i> Reset
+                  </a>
+              </div>
+          </form>
+          </div>
+      </div>
+    </div>
+    <div class="col-xl-8">
+      <div class="card bg-white-100 border-0 shadow">
+        <!-- 
+        <div class="card-header d-sm-flex flex-row align-items-center flex-0">
+          <div class="d-block mb-3 mb-sm-0">
+              <div class="fs-5 fw-normal mb-2">Inventory Map</div>
           </div>
+        </div> 
+        -->
+        <div class="card-body p-2">
+          {{ asset_map|safe }}
+        </div>
       </div>
+    </div>
   </div>
-  
-  <div class="card card-body border-0 shadow table-wrapper table-responsive">
-<table class="table table-hover">
-<thead>
-  <tr>
-    <th><span 
-        title="Structure Number is an alphanumeric sequence assigned by each State to uniquely identify the structure within each State.">
-        CALID
-      </span></th>
-    <th>CESMD</th>
-    <th>Name</th>
-      {% if false %}
-    <th>Source code</th>
-      {% endif %}
-  </tr>
-</thead>
-<tbody>
-  {% for v in bridges %}
-    <tr>
-      <td><code>{{ v.calid.split|first }}</code></td>
 
-      <td><a target="_blank"
-             href="https://www.strongmotioncenter.org/cgi-bin/CESMD/stationhtml.pl?stationID={{ v.cesmd }}&netword=CGS">
-          <code>{{ v.cesmd }}</code></a></td>
+<div class="card my-4">
+  <div class="card-body border-0 shadow table-wrapper table-responsive">
+    <table class="table table-hover">
+    <thead>
+      <tr>
+        <th><span 
+            title="Structure Number is an alphanumeric sequence assigned by each State to uniquely identify the structure within each State.">
+            CALID
+          </span></th>
+        <th>CESMD</th>
+        <th>Name</th>
+      </tr>
+    </thead>
+    <tbody>
+      {% for v in bridges %}
+        <tr>
+          <td><code>{{ v.calid.split|first }}</code></td>
 
-      {% if v.name %}
-      <td> <a href="{% url 'asset_profile' calid=v.calid %}" >{{ v.name }}</a></td>
-      {% else %}
-      <td> <a href="{% url 'asset_profile' calid=v.calid %}" >{{ v.calid }}</a></td>
-      {% endif %}
+          <td><a target="_blank"
+                href="https://www.strongmotioncenter.org/cgi-bin/CESMD/stationhtml.pl?stationID={{ v.cesmd }}&netword=CGS">
+              <code>{{ v.cesmd }}</code></a></td>
 
-      {% if False %}
-      <td><code>{{ v.total_length.split|first }}</code></td>
-      <td><code>{{ v.no_of_spans }}</code></td>
-      {% endif %}
+          {% if v.name %}
+          <td> <a href="{% url 'asset_profile' calid=v.calid %}" >{{ v.name }}</a></td>
+          {% else %}
+          <td> <a href="{% url 'asset_profile' calid=v.calid %}" >{{ v.calid }}</a></td>
+          {% endif %}
 
-    </tr>
-  {% endfor %}
-</tbody>
-</table>
+        </tr>
+      {% endfor %}
+    </tbody>
+    </table>
+  </div>
 
-<div class="card-footer px-3 border-0 d-flex flex-column flex-lg-row align-items-center justify-content-between">
-  <nav aria-label="Page navigation example">
-      <ul class="pagination mb-0">
-        <li class="page-item {% if not bridges.has_previous %}disabled{% endif %}">
+  <div class="card-footer px-3 border-0 d-flex flex-column flex-lg-row align-items-center justify-content-between">
+    <nav aria-label="Page navigation example">
+        <ul class="pagination mb-0">
+          <li class="page-item {% if not bridges.has_previous %}disabled{% endif %}">
             {% if bridges.has_previous %}
-              <a class="page-link" href="?page={{ bridges.previous_page_number }}/">Previous</a>
+              <a class="page-link" href="?page={{ bridges.previous_page_number }}&{{ query_string }}">Previous</a>
             {% else %}
               <a class="page-link disabled" href="#">Previous</a>
             {% endif %}
           </li>
           {% for page in bridges.paginator.page_range %}
-          {% if page <= bridges.number|add:3 and page >= bridges.number|add:-3 %}
-          <li class="page-item {% if page == bridges.number %}active{% endif %}">
-              <a class="page-link" href="?page={{ page }}">{{ page }}</a>
-          </li>
-          {% endif %}
+            {% if page <= bridges.number|add:3 and page >= bridges.number|add:-3 %}
+              <li class="page-item {% if page == bridges.number %}active{% endif %}">
+                <a class="page-link" href="?page={{ page }}&{{ query_string }}">{{ page }}</a>
+              </li>
+            {% endif %}
           {% endfor %}
           <li class="page-item {% if not bridges.has_next %}disabled{% endif %}">
             {% if bridges.has_next %}
-                <a class="page-link" href="?page={{ bridges.next_page_number }}/">Next</a>
+              <a class="page-link" href="?page={{ bridges.next_page_number }}&{{ query_string }}">Next</a>
             {% else %}
               <a class="page-link disabled" href="#">Next</a>
             {% endif %}
           </li>
-      </ul>
-  </nav>
-  <div class="fw-normal small mt-4 mt-lg-0">Showing <b>{{ bridges|length }}</b> out of <b>{{ bridges.paginator.count }}</b> entries</div>
-</div>
-{% comment %}
-    <div class="card-footer px-3 border-0 d-flex flex-column flex-lg-row align-items-center justify-content-between">
-      <nav aria-label="Page navigation example">
-        <ul class="pagination mb-0">
-          <li class="page-item disabled" >
-              <a class="page-link" href="#">Previous</a>
-          </li>
-          <li class="page-item disabled">
-              <a class="page-link" href="#">1</a>
-          </li>
-          <li class="page-item disabled" style="pointer-events: none;">
-              <a class="page-link" href="#">Next</a>
-          </li>
+
+
+          {% if False %}
+          <li class="page-item {% if not bridges.has_previous %}disabled{% endif %}">
+              {% if bridges.has_previous %}
+                <a class="page-link" href="?page={{ bridges.previous_page_number }}/">Previous</a>
+              {% else %}
+                <a class="page-link disabled" href="#">Previous</a>
+              {% endif %}
+            </li>
+            {% for page in bridges.paginator.page_range %}
+            {% if page <= bridges.number|add:3 and page >= bridges.number|add:-3 %}
+            <li class="page-item {% if page == bridges.number %}active{% endif %}">
+                <a class="page-link" href="?page={{ page }}">{{ page }}</a>
+            </li>
+            {% endif %}
+            {% endfor %}
+            <li class="page-item {% if not bridges.has_next %}disabled{% endif %}">
+              {% if bridges.has_next %}
+                  <a class="page-link" href="?page={{ bridges.next_page_number }}/">Next</a>
+              {% else %}
+                <a class="page-link disabled" href="#">Next</a>
+              {% endif %}
+            </li>
+            {% endif %}
         </ul>
-      </nav>
-        <div class="fw-normal small mt-4 mt-lg-0">Showing <b>{{ bridges|length }}</b> out of <b>{{ bridges|length }}</b> entries</div>
-    </div>
+    </nav>
+    <div class="fw-normal small mt-4 mt-lg-0">Showing <b>{{ bridges|length }}</b> out of <b>{{ bridges.paginator.count }}</b> entries</div>
   </div>
-{% endcomment %}
+</div>
+
 {% endblock content %}
 
 {% block javascripts %}