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

    <ol id='failing-nav' class='breadcrumb'>
      <li class='<%= "#{'active' if @suite.nil?}" %>'>
        <span class='dropdown'>
          <a href='#' class='dropdown-toggle' data-toggle='dropdown'>All</a>
          <ul class='dropdown-menu'>
            <li><a href='/status/failing'>Last <%= @packages_per_page %> Packages</a></li>
            <li><a href='/status/failing/always_failing/'>Always Failing</a></li>
            <li><a href='/status/failing/had_success/'>Had Success</a></li>
            <li><a href='/status/failing/all/'>All Packages</a></li>
          </ul>
        </span>
      </li>

      <% Debci.config.suite_list.each do |suite| %>
        <li class='<%= "#{'active' if suite == @suite}" %>'>
          <span class='dropdown'>
            <a href='#' class='dropdown-toggle' data-toggle='dropdown'><%= suite %></a>
            <ul class='dropdown-menu'>
              <li><a href='/status/failing/<%= suite %>/'>Last <%= @packages_per_page %> Packages</a></li>
              <li><a href='/status/failing/<%= suite %>/always_failing/'>Always Failing</a></li>
              <li><a href='/status/failing/<%= suite %>/had_success/'>Had Success</a></li>
              <li><a href='/status/failing/<%= suite %>/all/'>All Packages</a></li>
            </ul>
          </span>
        </li>
      <% end %>
    </ol>

    <h4>
      <%= @jobs.length %> failures
    </h4>
    <div class='form-group'>
      <span>Enter Package Name: </span><input type='text' id='filter'>
    </div>

    <table id='failing-table' class='table table-striped'>
      <thead>
        <tr id='headline' class=''>
          <th>Package</th>
          <th>Suite</th>
          <th>Architecture</th>
          <th>Status</th>
        </tr>
      </thead>
      <tbody>
        <% @jobs.each do |job| %>
          <tr>
            <td>
              <a href="<%= package_url(job.package) %>" class='package'>
                <%= job.package.name %>
              </a>
            </td>
            <td>
              <%= job.suite %>
            </td>

            <td>
              <%= job.arch %>
            </td>

            <td>
              <a href='<%= history_url(job) %>'>
                <%== icon(job.status) %>
                <%= job.title %>
              </a>
            </td>
          </tr>
        <% end %>
      </tbody>
    </table>
  </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>
