{% extends "main.html" %}

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

{% block title %}Captures{% endblock %}

{% block scripts %}
{{ super() }}
<script type="text/javascript" nonce="{{ csp_nonce() }}">
    $('#table').DataTable( {
        "order": [[ 0, "desc" ]],
        "pageLength": 50,
        "searching": false,
        "paging": false
    });
</script>
<script nonce="{{ csp_nonce() }}">
  async function update_status() {
    let capture_status = document.getElementsByClassName('capture_status');
    let capture_error = document.getElementsByClassName('capture_error');
    let keep_going = false;
    for (let i = 0; i < capture_status.length; i++) {
      await fetch(`/json/${capture_status[i].id}/status?with_error=1`)
        .then(response => response.json())
        .then(cs => {
          if ((cs.status_code == 0) || (cs.status_code == 2)) {
            capture_status[i].innerHTML = "Capture ongoing, please wait...";
          }
          else if (cs.status_code == 1){
            capture_status[i].innerHTML = "Capture done.";
            if ('error' in cs ){
                capture_error[i].innerHTML = cs.error;
            }
          }
          else {
            capture_status[i].innerHTML = "Unknown capture.";
          };
          if (cs.status_code != 1) {
            keep_going = true;
          };
         });
    };
    if (!keep_going) {
        window.clearInterval(update_status_interval);
    };
  }

  let update_status_interval = window.setInterval(update_status, 5000);
</script>
{% endblock %}


{% block content %}
  <center>
      <h4>Ongoing captures</h4>
      <button class="btn btn-primary goBack" type="button">Go Back</button>
  </center>
  <div>The captures below are queued, it will take a few minutes before the links are working</div>
  <div class="table-responsive">
  <table id="table" class="table" style="width:96%">
    <thead>
     <tr>
       <th>URL</th>
       <th>Link</th>
       <th>Status</th>
       <th>Error message</th>
     </tr>
    </thead>
    <tbody>
      {% for uuid, captured_url in bulk_captures %}
      <tr>
        <td>
          {{ shorten_string(captured_url, 50, with_title=True) }}
        </td>
        <td><a href="{{ url_for('tree', tree_uuid=uuid) }}">Show capture</a></td>
        <td id="{{uuid}}" class="capture_status">Please wait...</td>
        <td id="{{uuid}}" class="capture_error"></td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  </div>
{% endblock %}