<div class='row'>
  <div class='col-md-12'>
    <h1 class='page-header'>Status <small> / Failing / <%= @title %></small></h1>

    <%== erb(:status_nav ) %>
    <%== erb(:job_filter ) %>

    <h4>
      <%= @failing_number %> failures
    </h4>
    <div class='form-group'>
      <span>Enter Package Name: </span><input type='text' id='filter'>
    </div>
    <%== erb(:job_listing, locals: { jobs_list: @jobs.records, fields: [:package, :suite, :arch, :status]}) %>
    <%== erb(:pagination, locals: { results: @jobs}) %>

  </div>
</div>

<script type="text/javascript">
  document.getElementById('failing-table').addEventListener("load", pageLoaded());

  function pageLoaded() {
    var filterInput = document.getElementById('filter');

    filterInput.focus();
    filterInput.select();

    filterInput.onkeyup = function() {
      filterTable(filterInput.value);
    }

    function filterTable(value) {
      var rows = document.getElementsByTagName('tr');

      if (value == '') {
        for (var i = 0; i < rows.length; ++i) {
          rows[i].style.display = '';
        }
      } else {
        for (var i = 0; i < rows.length; ++i) {
          var tds = rows[i].getElementsByClassName('package');

          for (var j = 0; j < tds.length; ++j) {
            if (tds[j].innerText.indexOf(value) == -1) {
              tds[j].parentNode.parentNode.style.display = 'none';
            } else {
                tds[j].parentNode.parentNode.style.display = '';
            }
          }
        }
      }
    }
  }
</script>

<style type='text/css'>
  tr.#headline {
    display: '' !important;
  }

  .active {
    font-weight: bold;
  }
</style>
