{# Demonstrates: the list of all pages, old ones from oldpublic/ too, with a filter. #}
{% extends "base.html" %}

{% block main %}
<h1>{{ page.title }}</h1>
{{ page.content }}

<p class="filter" hidden><input type="search" id="filter" placeholder="Filter" aria-label="Filter the list"></p>
<ul class="all">
  {% for p in pages("/**", old=true) %}
  <li>
    {% if p.published %}
    <time datetime="{{ p.published_iso }}">{{ p.published_iso }}</time>
    {% endif %}
    <a href="{{ p.url }}">{{ p.title }}</a>
  </li>
  {% endfor %}
</ul>

<script>
// Filter as you type: every word must appear in the title or date.
(function () {
  var f = document.getElementById("filter");
  var items = document.querySelectorAll("ul.all li");
  f.parentNode.hidden = false;
  f.addEventListener("input", function () {
    var words = f.value.toLowerCase().split(/\s+/).filter(Boolean);
    items.forEach(function (li) {
      var t = li.textContent.toLowerCase();
      li.hidden = !words.every(function (w) { return t.indexOf(w) >= 0; });
    });
  });
})();
</script>
{% endblock %}