{% extends 'layout.html' %}
{% import '_macros.html' as macros %}
{% block content %}
<div class="ui wide grid">
  <div class="wide row">
      <div class="three wide column">
        <div class="ui">End Time (between)</div>
      </div>
      <div class="three wide column">
        <label for="min"></label><input type="date" id="min" name="min">
      </div>
      <div class="three wide column">
        <label for="max"></label><input type="date" id="max" name="max">
      </div>
  </div>
  <div class="wide row">
    <div class="three wide column">
      <div class="ui">Status</div>
    </div>
    {% for status in ['failed', 'changed', 'unchanged', 'noop'] %}
      <div class="three wide column">
        <div class="ui checked checkbox">
          <input id="{{ status }}" checked="" type="checkbox">
          <label for="{{ status }}">{{ status|capitalize }}</label>
        </div>
      </div>
    {% endfor %}
  </div>
</div>
<table id="reports_table" class='ui very basic table stackable'>
  <thead>
    <tr>
      {% for column in columns %}
      <th>{{ column.name }}</th>
      {% endfor %}
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>
{% endblock content %}
{% block onload_script %}
{% macro extra_options(caller) %}
  // No initial loading
  "deferLoading": true,
{% endmacro %}
  {{ macros.datatable_init(table_html_id="reports_table", ajax_url=url_for('reports_ajax', env=current_env, node_name=node_name), data=None, default_length=config.NORMAL_TABLE_COUNT, length_selector=config.TABLE_COUNT_SELECTOR, extra_options=extra_options) }}
  function date_filter_change(){
    var minDate = $('#min').prop('value');
    var maxDate = $('#max').prop('value');

    var data = {};

    if(minDate != '') {
        data['min'] = minDate;
    }

    if(maxDate != '') {
        data['max'] = maxDate;
    }

    table.column(0).search(JSON.stringify(data)).draw();
  }

  // Event listener for status filters
  function status_filter_change(){
    var sum = '';
    var failed = $('#failed').prop('checked');
    var changed = $('#changed').prop('checked');
    var unchanged = $('#unchanged').prop('checked');
    var noop = $('#noop').prop('checked');
    if ( failed && changed && unchanged && noop) { sum = '*'; }
    else if (!(failed || changed || unchanged || noop)) { sum = 'none'; }
    else {
      if (failed) { sum += 'failed|'; }
      if (changed) { sum += 'changed|'; }
      if (unchanged) { sum += 'unchanged|'; }
      if (noop) { sum += 'noop|'; }
    }
    table.column(1).search(sum).draw();
  }
    $('#failed, #changed, #unchanged, #noop').change(status_filter_change);
    $('#min, #max').change(date_filter_change);
  // Call at init - fix page reload behavior
  status_filter_change();
  date_filter_change();
{% endblock onload_script %}
