{% extends "main.html" %}

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

{% block title %}Lookyloo{% endblock %}

{% block card %}
<meta property="og:title" content="Lookyloo" />
<meta property="og:type" content="website"/>
<meta
  property="og:description"
  content="Lookyloo captures websites and let you investigate them."
/>
<meta
  property="og:image"
  content="https://{{public_domain}}{{ url_for('static', filename='lookyloo.jpeg') }}"
/>
<meta
  property="og:url"
  content="https://{{public_domain}}"
/>
<meta name="twitter:card" content="summary_large_image">
{% endblock %}

{% block scripts %}
{{ super() }}
<script type="text/javascript">
$(document).ready(function () {
  $('#table').DataTable( {
    "order": [[ 1, "desc" ]],
    "pageLength": 50,
    "columns": [
        { "orderable": false, "width": 400 },
        { "orderable": false, "width": 150 },
        { "orderable": false, "width": 400 }
    ],
    "columnDefs": [{
        "targets": 1,
        "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>

{% endblock %}

{% block styles %}
{{ super() }}
<link rel="stylesheet" href="{{ url_for('static', filename='index.css') }}"
      integrity="{{get_sri('static', 'index.css')}}"
      crossorigin="anonymous">
{% endblock %}


{% block content %}
  <div class="corner-ribbon top-left sticky white shadow">
    <a href="https://www.lookyloo.eu/docs/main/index.html">Documentation</a>
  </div>
  <div class="corner-ribbon bottom-left sticky white shadow">
      <a href="https://github.com/Lookyloo/lookyloo/releases/tag/v{{version}}">Changelog</br>(v{{version}})</a>
  </div>
  {% if show_project_page %}
  <div class="corner-ribbon top-right sticky white shadow">
    <a href="https://github.com/Lookyloo">Project page</a>
  </div>
  {% endif %}
  <center>
    <a href="{{ url_for('capture_web') }}">
      <img src="{{ url_for('static', filename='lookyloo.jpeg') }}"
           alt="Lookyloo" width="200">
    </a>
  </center>
  <center>
    <h4>Web forensics tool</h4>
    </br>
    <a href="{{ url_for('capture_web') }}">
      <button class="new-capture-button btn-primary">Start a new capture</button>
    </a>
    <br><br>
    {{ render_messages(container=True, dismissible=True) }}
  </center>

  <div class="table-responsive">
  <table id="table" class="table" style="width:96%">
    <thead>
     <tr>
       <th>Page</th>
       <th>Timestamp</th>
       <th>Redirects</th>
     </tr>
    </thead>
    <tbody>
      {% for uuid, page_title, datetime, url, redirects, incomplete_redirects in titles %}
      <tr>
        <td data-search="{{ page_title }} {{ url }}">
          <p title="{{ page_title }}"><a href="{{ url_for('tree', tree_uuid=uuid) }}">{{ page_title }}</a></p>
          {{ shorten_string(url, 50, with_title=True) }}
        </td>
        <td>{{ datetime }}</td>
        <td>
          {% if redirects %}
            {% for r in redirects %}
            <p title="{{ r }}">
            {% if loop.previtem %}
              {{ ("&nbsp;" * (loop.index *2) )|safe }}↪ {{ shorten_string(r, 50) }}
            {%else%}
              {{ shorten_string(r, 50) }}
            {%endif%}
            </p>
            {% endfor %}
            {% if incomplete_redirects %}
                <a style="float: right;" href="{{ url_for('cache_tree', tree_uuid=uuid) }}">Unable to find the redirects, click here to build the tree</a>
            {%else%}
              <a style="float: right;" href="{{ url_for('redirects', tree_uuid=uuid) }}">Download redirects</a>
            {%endif%}
          {% else%}
            No redirect
          {%endif%}
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  </div>
{% endblock %}