{% extends "base.html" %}{% block content %}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Queues Dashboard</title>
    <script>
      let autoRefreshEnabled = true;
      let autoRefreshInterval;
      const prefix = '{{ prefix }}';

      function showNotification(message) {
        const notification = document.createElement('div');
        notification.className = 'notification';
        notification.textContent = message;

        document.body.appendChild(notification);

        setTimeout(() => {
          document.body.removeChild(notification);
        }, 3000);
      }

      function toggleAutorefresh() {
        autoRefreshEnabled = !autoRefreshEnabled;
        if (autoRefreshEnabled) {
          autoRefreshInterval = setInterval(updateQueuesData, 5000);
          showNotification('Autorefresh enabled');
        } else {
          clearInterval(autoRefreshInterval);
          showNotification('Autorefresh disabled');
        }
      }

      $(document).ready(function () {
        $('#autorefresh-switch').on('change', function () {
          toggleAutorefresh();
        });

        autoRefreshEnabled = $('#autorefresh-switch').is(':checked');
        if (autoRefreshEnabled) {
          autoRefreshInterval = setInterval(updateQueuesData, 5000);
        }
      });

      function updateQueuesData() {
        if (autoRefreshEnabled) {
          $.ajax({
            url: prefix + '/queues/json',
            type: 'GET',
            dataType: 'json',
            success: function (data) {
              updateQueuesTable(data);
            },
            error: function (error) {
              console.error('Error fetching queues data: ', error);
            },
          });
        }
      }

      function deleteJobsInQueue(queue_name) {
        $.ajax({
          url: prefix + '/queues/' + queue_name,
          type: 'DELETE',
          error: function (error) {
            console.error('Error deleting jobs in queue: ', error);
          },
        });
      }

      function updateQueuesTable(data) {
        var tableBody = $('#queues tbody');

        if (tableBody.children().length > 0) {
          tableBody.empty();
        }

        $.each(data, function (index, queue_stats) {
          var row = $('<tr>');
          row.append($('<td>').text(queue_stats.queue_name));
          row.append(
            $('<td>').append(
              $('<a>')
                .attr(
                  'href',
                  prefix +
                    '/jobs' +
                    '?state=queued&queue_name=' +
                    queue_stats.queue_name
                )
                .text(queue_stats.queued)
            )
          );
          row.append(
            $('<td>').append(
              $('<a>')
                .attr(
                  'href',
                  prefix +
                    '/jobs' +
                    '?state=started&queue_name=' +
                    queue_stats.queue_name
                )
                .text(queue_stats.started)
            )
          );
          row.append(
            $('<td>').append(
              $('<a>')
                .attr(
                  'href',
                  prefix +
                    '/jobs' +
                    '?state=failed&queue_name=' +
                    queue_stats.queue_name
                )
                .text(queue_stats.failed)
            )
          );
          row.append(
            $('<td>').append(
              $('<a>')
                .attr(
                  'href',
                  prefix +
                    '/jobs' +
                    '?state=deferred&queue_name=' +
                    queue_stats.queue_name
                )
                .text(queue_stats.deferred)
            )
          );
          row.append(
            $('<td>').append(
              $('<a>')
                .attr(
                  'href',
                  prefix +
                    '/jobs' +
                    '?state=finished&queue_name=' +
                    queue_stats.queue_name
                )
                .text(queue_stats.finished)
            )
          );
          row.append(
            $('<td>').append(
              $('<button>')
                .text('Delete')
                .addClass('delete-button')
                .on('click', function () {
                  deleteJobsInQueue(queue_stats.queue_name);
                })
            )
          );
          tableBody.append(row);
        });
      }

      $(document).ready(function () {
        updateQueuesData();
      });

      if (autoRefreshEnabled) {
        setInterval(updateQueuesData, 5000);
      }
    </script>
  </head>

  <body>
    <div class="h2-section">
      <h2>Queues</h2>
      <div class="custom-switch">
        <input
          type="checkbox"
          class="custom-control-input"
          id="autorefresh-switch"
          checked
        />
        <label class="custom-control-label"> Autorefresh </label>
      </div>
    </div>
    <div class="section">
      <table id="queues">
        <thead>
          <tr>
            <th>Queue Name</th>
            <th>Queued</th>
            <th>Started</th>
            <th>Failed</th>
            <th>Deferred</th>
            <th>Finished</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          {% for queue_stats in queue_data %}
          <tr>
            <td>
              <a href="/jobs?queue={{ queue_stats.queue_name }}">
                {{ queue_stats.queue_name }}
              </a>
            </td>
            <td>
              <a href="/jobs?queue={{ queue_stats.queue_name }}&state=started">
                {{ queue_stats.started }}
              </a>
            </td>
            <td>
              <a href="/jobs?queue={{ queue_stats.queue_name }}&state=failed">
                {{ queue_stats.failed }}
              </a>
            </td>
            <td>
              <a href="/jobs?queue={{ queue_stats.queue_name }}&state=deferred">
                {{ queue_stats.deferred }}
              </a>
            </td>
            <td>
              <a href="/jobs?queue={{ queue_stats.queue_name }}&state=finished">
                {{ queue_stats.finished }}
              </a>
            </td>
            <td>
              <button
                class="delete-button"
                onclick="deleteJobsInQueue('{{ queue_stats.queue_name }}')"
              >
                Delete Jobs
              </button>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    {% endblock %}
  </body>
</html>
