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

{% if from_popup %}
{% extends "main.html" %}

{% from 'bootstrap5/utils.html' import render_messages %}

{% block title %}{{ body_hash }}{% endblock %}

{% block scripts %}
{{ super() }}

<script type="text/javascript" nonce="{{ csp_nonce() }}">
    const openNewTabButtons = document.querySelectorAll('.openNewTab');
    if (openNewTabButtons) {
        openNewTabButtons.forEach(el => el.addEventListener('click', event => {
            window.opener.openTreeInNewTab(el.dataset.capture, el.dataset.hostnode);
        }));
    }
</script>

<script type="text/javascript"  nonce="{{ csp_nonce() }}">
  new DataTable('#bodyHashDetailsTable', {
    order: [[ 0, "desc" ]],
    columnDefs: [{ width: '20%', 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: '40%', targets: 1 },
                 { width: '40%', targets: 2 }],
  });
</script>

{% endblock %}

{%else%}

<script type="text/javascript"  nonce="{{ csp_nonce() }}">
  new DataTable('#bodyHashDetailsTable', {
    order: [[ 0, "desc" ]],
    columnDefs: [{ width: '20%', 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: '40%', targets: 1 },
                 { width: '40%', targets: 2 }],
  });
</script>

{%endif%}


{% block content %}

{% if from_popup %}
<center><button class="btn btn-primary goBack" type="button">Go Back</button></center>
{%endif%}

<center>
  <h6>{{ body_hash }}</h6>
  <h6>Only the most recent captures are listed below, this will change soon.</h6>
  <a href="{{ url_for('ressource_by_hash', sha512=body_hash) }}">Download</a>
</center>

<p>The same file was seen in these captures recently:</p>
<table id="bodyHashDetailsTable" class="table table-striped" style="width:100%">
  <thead>
   <tr>
     <th>Capture Time</th>
     <th>Capture Title</th>
     <th>URL</th>
   </tr>
  </thead>
  <tbody>
    {% for capture_uuid, title, timestamp, hostnode_uuid, url in captures %}
    <tr>
      <td>{{ timestamp }}</td>
      <td>
        {% if from_popup %}
        <button type="button" class="btn btn-link openNewTab" data-capture="{{capture_uuid}}" data-hostnode="{{hostnode_uuid}}">{{ title }}</button>
        {% else %}
        <a href="{{ url_for('tree', tree_uuid=capture_uuid, node_uuid=hostnode_uuid) }}">{{ title }}</a>
        {% endif %}
      </td>
      <td>{{ url }}</td>
    </tr>
    {% endfor %}
  </tbody>
</table>
{% endblock %}