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

<script type="text/javascript">
  var table = new DataTable('#bodyHashesTable', {
    order: [[ 0, "desc" ]],
    columnDefs: [{ width: '10%', targets: 0 },
                 { width: '10%', targets: 1 },
                 { width: '60%', targets: 2 },
                 { width: '20%', targets: 3 }],
    initComplete: function (settings, json) {
      $('[data-bs-toggle="tooltip"]').tooltip({html: true});
    }
  }).on('draw', function() {
    $('[data-bs-toggle="tooltip"]').tooltip({html: true});
  });
</script>

<table id="bodyHashesTable" class="table table-striped" style="width:100%">
<thead>
 <tr>
   <th>Captures total</th>
   <th>File type</th>
   <th>Ressource URL in capture</th>
   <th>Hash (sha512)</th>
 </tr>
</thead>
<tbody>
  {% for body_hash, info in body_hashes.items() %}
  {% set icon_info = get_icon(info['node'].generic_type) %}
  <tr>
    <td>{{ info['total_captures'] }}</td>
    <td>
        {{popup_icons_response(info['node'], tree_uuid)}}
    </td>
    <td>
      <p class="text-break">{{ info['node'].name }}</p>
      <a href="#/" onclick="openTreeInNewTab('{{ tree_uuid }}', '{{ info['node'].uuid }}')">Show on tree</a>
    </td>
    <td>
      <span class="d-inline-block text-truncate" style="max-width: 200px;">
         <a href="#bodyHashDetailsModal" data-remote="{{ url_for('body_hash_details', body_hash=body_hash) }}"
            data-bs-toggle="modal" data-bs-target="#bodyHashDetailsModal" role="button">
            {{body_hash}}
         </a>
      </span>
    </td>
  </tr>
  {% endfor %}
</tbody>
</table>