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

{% block content %}
<ol class="breadcrumb">
  <li class="breadcrumb-item"><a href="/">Home</a></li>
  <li class="breadcrumb-item"><a href="{% url 'osquery:index' %}">Osquery</a></li>
  <li class="breadcrumb-item"><a href="{% url 'osquery:distributed_queries' %}">Runs</a></li>
  <li class="breadcrumb-item"><a href="{{ distributed_query.get_absolute_url }}">{{ distributed_query }}</a></li>
  {% if reset_link %}
  <li class="breadcrumb-item"><a href="{{ reset_link }}">Results</a></li>
  {% else %}
  <li class="breadcrumb-item active">Results</li>
  {% endif %}
  <li class="breadcrumb-item active">page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}</li>
</ol>

<div class="row">
  <div class="col-md-2" style="position:sticky;top:20px">
      {% if page_obj.paginator.count %}
        <h2 style="margin-top:0">Run {{ distributed_query }}</h2>
        <div class="btn-group" style="margin:0 0 10px 0">
        <h4 id="results">Result{{ page_obj.paginator.count|pluralize }} ({{ page_obj.paginator.count }})</h4>
        <button type="button" class="btn btn-link dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <span class="bi bi-download" aria-hidden="true"></span>
        </button>
        <ul class="dropdown-menu">
            {% for format, link in export_links %}
            <li><a class="dropdown-item task" href="{{ link }}">{{ format|upper }}</a></li>
            {% endfor %}
        </ul>
        </div>
        <form method="get">
            <div class="form-group">
                <input type="text" class="form-control" placeholder="search SN, result…" name="q" value="{{ search_q|default:"" }}" autofocus>
            </div>
        </form>
    {% else %}
        <h2>No results for this run</h2>
    {% endif%}
    {% if selected_fields or available_fields %}
    <div id="osquery-dist-q-fields" class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">Fields</h4>
      </div>
      <div class="panel-body">
        {% if selected_fields %}
        <p><strong>Selected field{{ selected_fields|length|pluralize }}</strong></p>
        <ul class="list-unstyled osquery-dist-q-sel-f">
          {% for link, field in selected_fields %}
          <li style="overflow:hidden;text-overflow:ellipsis"><a href="{{ link }}">{{ field }}</a></li>
          {% endfor %}
        </ul>
        {% endif %}
        {% if available_fields %}
        <p><strong>Available field{{ available_fields|length|pluralize }}</strong></p>
        <ul class="list-unstyled osquery-dist-q-ava-f">
          {% for link, field in available_fields %}
          <li style="overflow:hidden;text-overflow:ellipsis"><a href="{{ link }}">{{ field }}</a></li>
          {% endfor %}
        </ul>
        {% endif %}
      </div>
    </div>
    {% endif %}
  </div>
  <div class="col-md-10">
    {% pagination next_url previous_url %}

    {% if rows %}
    <div class="table-responsive">
      <table class="table table-striped align-middle">
        <thead>
          <tr>
            {% for header in headers %}
            <th>{{ header }}</th>
            {% endfor %}
          </tr>
        </thead>
        <tbody>
          {% for serial_number, row in rows %}
          <tr>
            <th style="max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
              <a href="{% machine_url serial_number %}">{{ serial_number|privacywrapper }}</a>
            </th>
            {% for cell in row %}
            <td>{{ cell|default:"-" }}</td>
            {% endfor %}
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    {% else %}
    {% for object in page_obj %}
    <table class="table table-striped align-middle">
      <thead>
        <tr>
          <th colspan="2"><a href="{% machine_url object.serial_number %}">{{ object.serial_number|privacywrapper }}</a></th>
        </tr>
      </thead>
      <tbody>
        {% for k, v in object.iter_row_kv %}
        <tr>
          <th width="200px">{{ k }}</th>
          <td>{{ v|default:"-" }}</td>
        </tr>
        {% endfor %}
      <tbody>
    </table>
    {% endfor %}
    {% endif %}

    {% pagination next_url previous_url %}

  </div>
</div>
{% 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 %}