{% from "macros.html" import shorten_string %}

<script type="text/javascript" nonce="{{ csp_nonce() }}">
  new DataTable('#faviconDetailsTable_{{favicon_sha512}}', {
    order: [[ 0, "desc" ]],
    columnDefs: [{ width: '30%',
                   targets: 0,
                   render: (data) => {
                    const date = new Date(data);
                    return date.getFullYear() + '-' + (date.getMonth() + 1).toString().padStart(2, "0") + '-' + date.getDate().toString().padStart(2, "0") + ' ' + date.toTimeString();
                   }
                 },
                 { width: '30%', targets: 1 },
                 { width: '50%', targets: 2 }],

  });
</script>

<center>
  <img src="data:{{mimetype}};base64,{{ b64_favicon }}" style="width:32px;height:32px;"/>
  <h5>Shodan MMH3 Hash: <a href="https://www.shodan.io/search?query=http.favicon.hash%3A{{ mmh3_shodan }}" target="_blank">{{ mmh3_shodan }}</a></h5>
</center>
<table id="faviconDetailsTable_{{favicon_sha512}}" class="table table-striped" style="width:100%">
  <thead>
    <tr>
      <th>Capture Time</th>
      <th>Capture Title</th>
      <th>Landing page</th>
    </tr>
  </thead>
  <tbody>
    {% for capture_uuid, title, landing_page, capture_time in captures %}
    <tr>
      <td>
        {{capture_time}}
      </td>
      <td>
        <a href="{{ url_for('tree', tree_uuid=capture_uuid) }}">
          {{ title }}
        </a>
      </td>
      <td>
        <span class="d-inline-block text-break" style="max-width: 400px;">
          {{ landing_page }}
        </span>
      </td>
    </tr>
    {% endfor %}
  </tbody>
</table>