{% extends "base_table.html" %}

{% block extra_scripts %}
  <script type="text/javascript">
    $(function() {
      var options = {
        "serverSide": true,
        "ajax": {
            "url": '/' + $('#table-name').text() + '/query',
            "type": 'POST',
            "dataSrc": function ( data ) {
              var old = JSON.stringify(data['aaData']).replace(/null/g, '"<span class=\'vc\'><i>NULL<i></span>"');
              var newArray = JSON.parse(old);
              return newArray;
            },
            "beforeSend": function () {
              $("#overlay").show();
              $(".loader").show();
            },
            "complete": function () {
              $("#overlay").hide();
              $(".loader").hide();
              truncate(localStorage.getItem('truncate-text'));
            }
        },
        "pagingType": "full_numbers",
        "lengthMenu": [10, 25, 50, 100, 300, 500],
        "stateSave": true,
        "orderMulti": false,
        "fixedHeader": true,
        "destroy": true,
        "columnDefs": [
          {
            "orderable": false,
            "targets": 0
          }
        ],
        "order": [[ 1, "asc" ]],
        "dom": 'lBfrtip',
        "buttons": [
          {
            "extend": 'excel',
            "title": $('#table-name').text(),
            "exportOptions": {
              "columns": ':visible:not(:eq(0))',
            }
          },
          {
            "extend": 'csv',
            "title": $('#table-name').text(),
            "exportOptions": {
              "columns": ':visible:not(:eq(0))'
            }
          }
        ]
      }

      if (localStorage.getItem('responsive-table-text') == "on") {
        $('#responsive-checkbox').prop("checked", true);
        options.responsive = true;
      } else {
        $('#responsive-checkbox').prop("checked", false);
        options.responsive = false;
      }

      var oTable = $('#table_content').DataTable(options);

      truncate(localStorage.getItem('truncate-text'));

      $('#truncate-checkbox').change(function() {
        var toggle = "off";
        if(this.checked) {
          toggle = "on";
        }
        truncate(toggle);
      });

      $('#responsive-checkbox').change(function() {
        var toggle = "off";
        if(this.checked) {
          toggle = "on";
        }
        responsiveTable(toggle);
      });
    });

    function truncate(toggle) {
      if (toggle == "off") {
        localStorage.setItem('truncate-text', 'off');
        $('#truncate-checkbox').prop("checked", false);
        $('tbody td').removeClass("truncate");
      } else  {
        localStorage.setItem('truncate-text', 'on');
        $('#truncate-checkbox').prop("checked", true);
        $('tbody td').addClass("truncate");
      }
    }

    function responsiveTable(toggle) {
      if (toggle == "off") {
        localStorage.setItem('responsive-table-text', 'off');
      } else  {
        localStorage.setItem('responsive-table-text', 'on');
      }
      window.location.reload();
    }
  </script>
{% endblock %}

{% block content_title %}
  {{ super() }}
  <small>{{ ds_table.all().count() }} rows</small>
{% endblock %}

{% block content_tab_class %} active{% endblock %}

{% block inner_content %}
  {# add filters #}
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="responsive-checkbox">
    <label class="form-check-label" for="responsive-checkbox">Responsive Table</label>
  </div>
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="truncate-checkbox">
    <label class="form-check-label" for="truncate-checkbox">Truncate Text</label>
  </div><br/>
  <table class="table table-striped" id="table_content">
    <thead>
      <tr>
        <th></th>
        {% for column in columns %}
          <th>
            {{ column }}
          </th>
        {% endfor %}
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
{% endblock %}
