{% include "_header.html" %}

</div> <!-- third row starts --> 

<div class="row"> <!-- third row starts -->
    <div class="col-12">
      <div class="card card-border-color card-border-color-warning">
        <div class="card-body mt-5">
        <table class="table table-striped table-hover be-table-responsive" id="log"></table>
        </div>
      </div>
    </div>
</div> <!-- third row ends -->   

{% include "_footer.html" %}  
{% include "_datatables_footer.html" %}  

<script type="text/javascript">

// initial state

$(document).ready(function(){
  App.init();
  //App.tableFilters();
});

var experiment_ids = {{ experiment_ids | safe }}

function initialState() {
    generateExperimentSelector(experiment_ids)   
    document.getElementById('experiment').value = sessionStorage.getItem('experiment_id')
}

function csvImport(path_to_file) {

d3.csv(path_to_file).then(prepData);

  function prepData(dataset) {

      // create the columns

      var keys = Object.keys(dataset[0])
      var headers = []

      keys.forEach(item => headers.push(Object({"title": item, "sTitle": item})));

      // create the data

      data = []
      dataset.forEach(row => data.push(Object.values(row)));

      // create the DataTables.js
      var table = $('#log').DataTable( {
          aLengthMenu: [
                  [15, 25, 50, 100, 200, -1],
                  [15, 25, 50, 100, 200, "All"]],
          language: { search: "", info: "<b>_START_</b> to <b>_END_</b> out of <b>_TOTAL_</b>" },
          data: data,
          destroy: true,
          responsive: true,
          columns: headers,
          pageLength: 15,
          "bFilter": true,
          dom:          
              "<'row mt-0 pt-0 mb-2'<'col-sm-3'l><'col-sm-6 text-center'><'col-sm-3 text-right'f>>" +
              "<'row'<'col-sm-12'tr>>" +
              "<'row'<'col-6 mt-5'i><'col-6 mt-4'p>>"
      });
  }
}
var filename = '/data/' + sessionStorage.getItem('experiment_id') + '.csv'
csvImport(filename)

    </script>
  </body>
</html>