{% extends 'base.html' %}
{% load ui_extras %}

{% block content %}
<ol class="breadcrumb">
  <li class="breadcrumb-item"><a href="/">Home</a></li>
  {% for url, anchor_text in breadcrumbs %}
  {% if url %}
  <li class="breadcrumb-item"><a href="{{ url }}">{{ anchor_text }}</a>
  {% else %}
  <li class="breadcrumb-item active">{{ anchor_text }}</li>
  {% endif %}
  {% endfor %}
</ol>

<div class="d-flex justify-content-between mb-3">
    <h2 class="mb-0">{{ title }}</h2>
</div>

<div class="d-flex flex-wrap align-items-center mb-1">
    <form method="GET" class="search-form">
        
        {{ search_form }}

        <button type="submit" class="btn btn-link mb-2">
            <i class="bi bi-search"></i>
        </button>
        <button type="button" name="action" value="search" class="btn btn-link dropdown-toggle mb-2"
                data-bs-toggle="dropdown" aria-expanded="false" aria-haspopup="true">
            <i class="bi bi-download"></i>
        </button>
        <ul class="dropdown-menu" aria-labelledby="downloadTargets">
            <li><a class="dropdown-item task" href="{% url 'inventory_api:deb_packages_export' %}" data-format="csv" class="task">CSV</a></li>
            <li><a class="dropdown-item task" href="{% url 'inventory_api:deb_packages_export' %}" data-format="xlsx" class="task">XLSX</a></li>
        </ul>
    </form>        
</div>

    
    {% if object_list %}
        <h3>Result{{ total_objects|pluralize }} ({{ total_objects }})</h3>
    
        {% pagination next_url previous_url %}

        <table class="table table-striped align-top table-hover">
            <thead>
            {% for header, link in table_headers %}
            <th>
                {% if link %}
                <a href="{{ link }}" style="white-space:nowrap;">{{ header }}</a>
                {% else %}
                {{ header }}
                {% endif %}
            </th>
            {% endfor %}
            </thead>
            <tbody>
            {% for deb_package in object_list %}
            <tr>
            <td colspan="2">
                <a href="{{ deb_package.link }}">{{ deb_package.name|default:"-" }}</a>
            </td>
            <td>
                {{ deb_package.ms_count }}
            </td>
            </tr>
            {% for version in deb_package.versions %}
            <tr>
            <td style="border-top:1px dotted #ddd"><a href="{{ version.link }}">{{ version.version }}</a></td>
            <td style="border-top:1px dotted #ddd">{{ version.source_name }}</td>
            <td style="border-top:1px dotted #ddd">{{ version.ms_count }}</td>
            </tr>
            {% endfor %}
            {% endfor %}
            </tbody>
        </table>
        
        {% pagination next_url previous_url %}
    {% elif search_form.is_bound %}
        {% url 'inventory:deb_packages' as empty_results_url %}
        {% empty_results empty_results_url %}
    {% endif %}

{% endblock %}


{% block extrajs %}
<script nonce="{{ request.csp_nonce }}">
  var WAIT_FOR_TASK_TIMEOUT_ID;

  function waitForTask(url) {
    $.ajax({
      dataType: "json",
      url: url,
      success: function (data) {
        console.log(data);
        if (data.unready) {
          WAIT_FOR_TASK_TIMEOUT_ID = window.setTimeout(waitForTask, 1000, url);
        } else if (data.status === "SUCCESS") {
          window.location = data.download_url;
        }
      }
    });
  }

  function launchTask($link) {
    var url = $link.attr("href");
    var postData = {"export_format": $link.data("format")};
    var formData = $link.parents("form").serializeArray();
    $.map(formData, function(n, i) {
      if (n['value']) {
        postData[n['name']] = n['value'];
      }
    });
    $.ajax({
      dataType: "json",
      contentType: "application/json",
      url: url,
      data: JSON.stringify(postData),
      method: "post",
      success: function (data) {
        WAIT_FOR_TASK_TIMEOUT_ID = window.setTimeout(waitForTask, 300, data.task_result_url);
      }
    });
  }

  $(document).ready(function () {
    $(".task").click(function (event) {
      event.preventDefault();
      launchTask($(this));
    });
  });
</script>
{% endblock %}