<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="static/javascript.js"></script>

<div class="errors-container">
  {% if error in errors %}
  <p>
    <i>
      You may have mistyped: </i><b>{{errors|join(',')}}</b><i>. Try again!</i>
    </i>
    {% endif %}
</div>

<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']}}<br>
          </td>
          <td>Score: {{host.abuseipdb['score']}}
            Last reported: {{host.abuseipdb['last_reported']}}</td>
          <td>{{host.domain}}</td>
          <td>{{host.metadata['registrar_country']}}</td>
          <td>{{host.metadata['creation_date']}}</td>
          <td>SPF: {{host.email_security[0]}}, DMARC: {{host.email_security[1]}}</td>
        </tr>
        <tr>
          <td colspan="7" id="info">
            <p>
              <b>VirusTotal</b>
              <br>
              {% if host.vt['score'] > 0 %}
              Vendor marked this host as malicious or suspicious:
              {{host.vt['vendors']|join(', ')}}
              {{host.vt['score']}}
              {% else %}
              No vendors marked this host as malicious or suspicious.
              {% endif %}
              <br>
              <b>AbuseIPDB</b>
              <br>
              IP address is: {{host.abuseipdb['IP_address']}}<br>
              Is this Tor: {{host.abuseipdb['Tor']}}<br>
              Usage: {{host.abuseipdb['usage']}}<br>
              <br>
              <!--Display some of the metadata info-->
            </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'});
          }
          else if (!cellData.startsWith('Score: 0') && col == 1) {
            $(td).css({'background-color': 'red', 'color': 'white'});
          }
        }
      }]
    });
  });
</script>

{% endblock %}