{% extends 'admin/change_list.html' %}
{% load crispy_forms_tags %}
{% load i18n %}
{% load static %}

{% block extrastyle %}
{{block.super}}
  <link rel="stylesheet" href="{% static "admin/css/forms.css" %}">
  <style>
      #progressBarBox {
          width: 100%;
          background-color: grey;
      }

      #progressBar {
          width: 0;
          height: 30px;
          background-color: rgb(32, 80, 103);
      }
  </style>
{% endblock %}

{% block pagination %}{% endblock %}
{% block filters %}{% endblock filters %}
{% block object-tools %}{% endblock object-tools %}
{% block search %}{% endblock %}

{% block breadcrumbs %}
  <div class="breadcrumbs">
    <a href="{% url 'admin:index' %}">{% trans "core.templates.admin.update_running_job.home_link" %}</a>
    {% if page_name %} &rsaquo; {{ page_name }}{% endif %}
  </div>
{% endblock %}

<h2>{% trans "core.templates.admin.fedora_management.heading" %}</h2>

{% block content %}
  {% if request.user.is_superuser %}
    <div id="content-main">
      <p><b>{% trans "core.templates.admin.fedora_management.job_id" %}</b>: {{ job_id }}</p>
    </div>
    {% if error %}
      <p>{{ error }}</p>
    {% else %}
      <div class="submit-row">
        <input type="submit" id="stopRequests" class="default"
               value="{% trans "core.templates.admin.fedora_management.stop_request" %}">
      </div>
      <p id="processFinishedParagraph" style="display: none">
        <strong>{% trans "core.templates.admin.fedora_management.finished" %}</strong>
      </p>
      <div id="progressBarBox" style="margin-bottom: 1rem">
        <div id="progressBar"></div>
      </div>
      <table id="result_list" class="table table-bordered table-striped">
        <tr>
          <th>{% trans "core.templates.admin.ident_cely" %}</th>
          <th>{% trans "core.templates.admin.result" %}</th>
          <th>{% trans "core.templates.admin.detail" %}</th>
        </tr>
      </table>
    {% endif %}
  {% else %}
    <p>{% trans "core.templates.admin.fedora_management.not_superuser" %}</p>
  {% endif %}

  <script>
      let stopRequests = false;
      document.getElementById("stopRequests").addEventListener("click", () => {
          stopRequests = true;
      });

      const requestUrl = "{{ url }}";

      async function sendRequest(url) {
          try {
              if (stopRequests) {
                  return 0;
              }

              const response = await fetch(url);
              if (!response.ok) {
                  throw new Error(`HTTP error! status: ${response.status}`);
              }

              const data = await response.json();

              const progressBar = document.getElementById("progressBar");
              progressBar.style.width = data.progress + "%"

              const table = document.getElementById("result_list");
              const newRow = table.insertRow(1);

              const cell1 = newRow.insertCell(0);
              const cell2 = newRow.insertCell(1);
              const cell3 = newRow.insertCell(2);

              cell1.textContent = data.ident_cely;
              cell2.textContent = data.result;
              cell3.textContent = data.detail;

              return data.remaining; 
              
          } catch (error) {
              console.error("Error fetching data:", error);
              return 0;
          }
          
      }

      async function process() {
        let result;         
        do {
            result = await sendRequest(requestUrl);
            if (result === 1) {
                document.getElementById("stopRequests").style.display = "none";
                document.getElementById("processFinishedParagraph").style.display = null;
            }
        } while (result > 1 && !stopRequests );        
      }
      
      process();
  </script>

{% endblock %}