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

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

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

{% block title %}{{ url }}{% endblock %}

{% block scripts %}
{{ super() }}
<script type="text/javascript">
    $('#table').DataTable( {
        "order": [[ 0, "desc" ]],
        "pageLength": 50,
        "columnDefs": [{
            "targets": 0,
            "render": function ( data, type, row, meta ) {
                let date = new Date(data);
                return date.getFullYear() + '-' + (date.getMonth() + 1).toString().padStart(2, "0") + '-' + date.getDate().toString().padStart(2, "0") + ' ' + date.toTimeString();
            }
        }]
    });
</script>

<script type="text/javascript">
    function openTreeInNewTab(treeUUID) {
        window.opener.openTreeInNewTab(treeUUID);
    };
</script>
{% endblock %}
{%endif%}

{% block content %}

{% if from_popup %}
<button onclick="window.history.back();" class="btn btn-primary" type="button">Go Back</button>
{%endif%}

<center>
    <h4>{{ hostname }}</h4>
</center>

<script type="text/javascript">
  new DataTable('#hostnameTable', {
    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: '80%', targets: 1 }],
  });
</script>

<table id="hostnameTable" 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>
{% endblock %}