new template setup, single page with multiple returned values

templates/lookup.html

@@ -0,0 +1,12 @@
+{% extends "layout.html" %}
+
+<!-- TODO let's see if this works -->
+
+{% block content %}
+
+{% include "forms.html" %}
+
+{% include "empty_form.html" %}
+
+{% endblock %}
+

templates/results-overview.html

@@ -0,0 +1,73 @@
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+<script src="static/javascript.js"></script>
+
+<div class="table-container">
+  <div class="results-table-new">
+    <table id="data" class="table table-striped">
+      <thead>
+        <th>IP address</th>
+        <th>VirusTotal</th>
+        <th>AbuseIPDB</th>
+        <th>Domain</th>
+        <th>Registration country</th>
+        <th>Registration date</th>
+        <th>Email security</th>
+      </thead>
+      <tbody>
+        {% for host in hosts %}
+        <tr>
+          <td>{{host.host}}</td>
+          <td>Score: {{host.vt['score']}} / {{host.vt['total']}}<br>
+            Last updated: {{host.vt['last_update']}}</td>
+          <td>Score: {{host.abuseipdb['data']['abuseConfidenceScore']}}
+            Last reported: {{host.abuseipdb['data']['lastReportedAt']}}</td>
+          <td>{{host.domain}}</td>
+          <td>{{host.metadata['registrar_country']}}</td>
+          <td>{{host.metadata['creation_date']}}</td>
+          <td>SPF: {{host.emailsec[0]}}, DMARC: {{host.emailsec[1]}}</td>
+        </tr>
+        <tr>
+          <td colspan="7" id="info">
+            <p>
+              Vendor marked this host as malicious or suspicious:
+              {% for vendor in host.vt['vendors'] %}
+              {{vendor}}
+              {% endfor %}
+              <br>
+              Some relevant data from AbuseIPDB:
+              {{ host.abuseipdb }}
+            </p>
+          </td>
+        </tr>
+        {% endfor %}
+      </tbody>
+    </table>
+  </div>
+</div>
+
+{% block scripts %}
+
+<script>
+  $(document).ready(function () {
+    $('#data').DataTable({
+      paging: true,
+      searching: true,
+      info: true,
+      columnDefs: [{
+        targets: '_all',
+        createdCell: function (td, cellData, rowData, row, col) {
+          if (cellData == 'outlook.com' && col == 0) {
+            $(td).css({'background-color': 'red', 'color': 'white'});
+            console.log(cellData);
+          }
+          if (cellData.startsWith('Score: 0') && col == 1) {
+            console.log("TEST", cellData);
+            $(td).css({'background-color': 'green', 'color': 'white'});
+          }
+        }
+      }]
+    });
+  });
+</script>
+
+{% endblock %}

templates/results.html

@@ -0,0 +1,15 @@
+{% extends "layout.html" %}
+
+{% block content %}
+
+{# For multiple results, maybe make a top results overview and then a navigation menu to specific URL pages? See: https://realpython.com/primer-on-jinja-templating/#include-a-navigation-menu #}
+
+{% include "forms.html" %}
+
+{% include "results-overview.html" %} 
+
+{% include "results-detail.html" %}
+
+{% include "empty_form.html" %}
+
+{% endblock %}