{% if table_entry_type == "Component" %}
<p>
&emsp;Filter: <input type="text" id="filter" size="30" /> (e.g. "crypto,VR")
</p>
{% endif %}
<table>
  <thead>
    <tr>
      <th class="column-entry-bold">{{ table_entry_type }}</th>
      <th class="column-entry-bold" title=
          "Line coverage is the percentage of code lines which have been executed at least once. Only executable lines within function bodies are considered to be code lines.">
        Line Coverage</th>
      <th class="column-entry-bold" title=
          "Function coverage is the percentage of functions which have been executed at least once. A function is considered to be executed if any of its instantiations are executed.">
        Function Coverage</th>
      <th class="column-entry-bold" title=
          "Region coverage is the percentage of code regions which have been executed at least once. A code region may span multiple lines (e.g in a large function body with no control flow). However, it's also possible for a single line to contain multiple code regions (e.g in 'return x || y &amp;&amp; z').">
        Region Coverage</th>
    </tr>
  </thead>
  <tbody>
  {% for entry in entries %}
    <tr class="light-row">
      <td>
        {% if entry["is_dir"] == True %}
          <pre><a href='{{ entry["href"] }}'>{{ entry["name"] }}/</a></pre>
        {% else %}
          <pre><a href='{{ entry["href"] }}'>{{ entry["name"] }}</a></pre>
        {% endif %}
      </td>
      {% for feature in ("lines", "functions", "regions") %}
      <td class='column-entry-{{ entry[feature]["color_class"] }}'>
        <pre>{{ entry[feature]["percentage"] }}% ({{ entry[feature]["covered"] }}/{{ entry[feature]["total"] }})</pre>
      </td>
      {% endfor %}
    </tr>
    {% endfor %}
  </tbody>
  {% if total_entry %}
    <tfoot>
      <tr class="light-row-bold">
        <td>
          <pre>Totals</pre>
        </td>
        {% for feature in ("lines", "functions", "regions") %}
        <td class='column-entry-{{ total_entry[feature]["color_class"] }}'>
          <pre>{{ total_entry[feature]["percentage"] }}% ({{ total_entry[feature]["covered"] }}/{{ total_entry[feature]["total"] }})</pre>
        </td>
        {% endfor %}
      </tr>
    </tfoot>
  {% endif %}
</table>
{% if table_entry_type == "Component" %}
<script>
  function filterInputChanged() {
    let filter = document.getElementById("filter");
    let filterString = filter.value;

    // Update query paramater in URL.
    let queryParams = new URLSearchParams(window.location.search);
    queryParams.set('filter', filterString);
    let newPath = window.location.pathname;
    if (filterString)
      newPath += '?' + queryParams.toString();
    history.pushState(null, '', newPath);

    filterRowsIfNeeded();
  }

  function filterRowsIfNeeded() {
    let queryParams = new URLSearchParams(window.location.search);
    let filterString = queryParams.get('filter') || "";
    let filterValuesLower = filterString.toLowerCase().split(',');
    let tbody = document.getElementsByTagName("tbody")[0];
    let rows = tbody.getElementsByTagName("tr");
    for (let row of rows) {
      let td = row.getElementsByTagName("td");
      let tdContent = row.innerText.toLowerCase();

      // |match| should be true on empty search (show everything).
      let match = !filterValuesLower;
      for (let filterValueLower of filterValuesLower) {
        if (tdContent.includes(filterValueLower)) {
          match = true;
          break
        }
      }

      if (match && row.style.display == 'none')
        row.style.display = 'table-row';
      else if (!match)
        row.style.display = 'none';
    }

    // Update filter value in input box (for cases when filter is provided
    // as part of page load URL).
    let filter = document.getElementById("filter");
    if (filter.value != filterString)
      filter.value = filterString;
  }

  window.onload = filterRowsIfNeeded;

  var filter = document.getElementById("filter");
  filter.onchange = filter.onkeyup = filterInputChanged;
</script>
{% endif %}