{% extends "loginheader.html" %}

{% block body %}
<div class="container-fluid pt-3">

<div class="row px-2">
<div class="col-md-12">
<form class="form-inline pb-3">
        <input id="myInput" onkeyup="myFunction()" class="form-control mr-sm-2 float-right border-dark" autofocus="autofocus" type="text" placeholder="Search for Fields" title="Type in a Field Name" aria-label="Search">
</form>
</div>

<div class="rounded px-2">
<table id="consoltable" class="table table-bordered table-dark table-striped" style="table-layout:auto;width:100%;">
      <thead>
        <tr class="bg-secondary">
          <th>Workbook Name</th>
          <th>Dashboard</th>
          <th>Worksheet</th>
          <th>Datasource</th>
          <th>Field Name</th>
          <th>Transformation</th>
        </tr>
      </thead>
      <tbody>
        {% for row in csvconsolfiledict: %}
        <tr>
            <td> {{ row["workbookname"][7:-4] }}</td>
            <td> {{ row["dashboard"] }}</td>
            <td> {{ row["worksheet"] }}</td>
            <td> {{ row["datasource"] }}</td>
            <td> {{ row["tabfieldname"] }}</td>
            <td> {{ row["transformation"] }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>

</div>
</div>

<script>
function myFunction() {
  // Declare variables
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("consoltable");
  tr = table.getElementsByTagName("tr");

  // Loop through all table rows, and hide those who don't match the search query
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[4];

    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}
</script>
</div>

{% endblock %}