{% extends "base.html" %}{% block content %}
<script>
  const protocol = "{{ protocol }}";
  const host = window.location.host;
  const prefix = "{{ prefix }}";
  const baseurl = protocol + "://" + host + prefix;

  function showNotification(message) {
    var notification = document.createElement("div");
    notification.className = "notification";
    notification.textContent = message;
    document.body.appendChild(notification);
    setTimeout(function () { document.body.removeChild(notification); }, 3000);
  }

  function showErrorNotification(message) {
    var notification = document.createElement("div");
    notification.className = "error-notification";
    notification.textContent = message;
    document.body.appendChild(notification);
    setTimeout(function () { document.body.removeChild(notification); }, 3000);
  }

  function export_object_csv(object_name) {
    fetch(baseurl + "/export/" + object_name)
      .then(function (r) { return r.blob(); })
      .then(function (blob) {
        var a = document.createElement('a');
        var url = window.URL.createObjectURL(blob);
        a.href = url;
        a.download = object_name + '_data.csv';
        document.body.appendChild(a);
        a.click();
        a.remove();
        window.URL.revokeObjectURL(url);
      })
      .catch(function (error) {
        console.error("Error fetching " + object_name + " data: ", error);
        showErrorNotification("Error exporting " + object_name);
      });
  }

  function export_object_json(object_name) {
    fetch(baseurl + "/" + object_name + "/json")
      .then(function (r) { return r.json(); })
      .then(function (data) {
        var jsonString = JSON.stringify(data, null, 2);
        var blob = new Blob([jsonString], { type: 'application/json' });
        var url = window.URL.createObjectURL(blob);
        var a = document.createElement('a');
        a.href = url;
        a.download = object_name + '_data.json';
        document.body.appendChild(a);
        a.click();
        a.remove();
        window.URL.revokeObjectURL(url);
      })
      .catch(function (error) {
        console.error("Error fetching " + object_name + " data: ", error);
        showErrorNotification("Error exporting " + object_name);
      });
  }

  function handle_format(elementId, type) {
    if (document.getElementById(elementId).value === 'csv')
      export_object_csv(type);
    else
      export_object_json(type);
  }

  document.addEventListener("DOMContentLoaded", function () {
    document.getElementById("export-queues").addEventListener("click", function () {
      handle_format('export-queues-format', 'queues');
    });
    document.getElementById("export-workers").addEventListener("click", function () {
      handle_format('export-workers-format', 'workers');
    });
    document.getElementById("export-jobs").addEventListener("click", function () {
      handle_format('export-jobs-format', 'jobs');
    });
  });
</script>

<div class="max-w-[90%] mx-auto mt-6 px-4">
  <table id="export" class="data-table">
    <thead>
      <tr>
        <th class="th-cell">Export Queues</th>
        <th class="th-cell">Export Workers</th>
        <th class="th-cell">Export Jobs</th>
      </tr>
    </thead>
    <tbody>
      <tr class="tr-stripe">
        <td class="td-cell">
          <div class="flex items-center gap-2.5 mt-2.5">
            <button class="btn-export" id="export-queues">Export Queues</button>
            <select class="ml-2.5 p-2 rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-200" id="export-queues-format">
              <option value="csv">CSV</option>
              <option value="json">JSON</option>
            </select>
          </div>
        </td>
        <td class="td-cell">
          <div class="flex items-center gap-2.5 mt-2.5">
            <button class="btn-export" id="export-workers">Export Workers</button>
            <select class="ml-2.5 p-2 rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-200" id="export-workers-format">
              <option value="csv">CSV</option>
              <option value="json">JSON</option>
            </select>
          </div>
        </td>
        <td class="td-cell">
          <div class="flex items-center gap-2.5 mt-2.5">
            <button class="btn-export" id="export-jobs">Export Jobs</button>
            <select class="ml-2.5 p-2 rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-200" id="export-jobs-format">
              <option value="csv">CSV</option>
              <option value="json">JSON</option>
            </select>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>
{% endblock %}