{% extends "base.html" %}
<!-- template: custom/search_demo.html -->
{% block content %}
<main class = "search">
{% block content_title %}
{% endblock %}
<h1>{{page.title}}</h1>
<p class = "summary">{{ page.summary|striptags }}</p>

{{ page.content }}

<!-- https://medium.com/@cgustin/tutorial-simple-search-filter-with-vanilla-javascript-fdd15b7640bf -->

<script>
function filterByName(event) {
  const searchTerm = event.target.value.trim().toLowerCase();
  const listItems = document.querySelectorAll("ul#list li");

  listItems.forEach(function(item) {
    
    // If the search bar is empty, display nothing instead of all the articles
    if(searchTerm === "") {
      item.style.display = 'none';
    }
    else {
      // set "display: none;" on all articles not containing the search terms
      if (!item.innerText.toLowerCase().includes(searchTerm)) {
        item.style.display = 'none';
      }
      else {
        item.style.display = 'revert';
      }
    }
  })
}
</script>

  <section class = "search">
    <div class = "search_field">
      <input type="search" placeholder="Search..." oninput="filterByName(event)">
    </div>
    <ul id = "list">
      <!-- List articles by recent date -->
      {% for article in articles|sort(attribute='date', reverse=True) %}
      <li>
        <!-- handle "save_as" url override -->
        <a href = "{% if article.save_as %}{{ article.save_as }}{% else %}{{ article.url }}{% endif %}"><h3>{{article.title}}</h3></a>
        <div class = "date">{{article.locale_date}}</div>{% if article.category %}<a class = "category" href="{{ SITEURL }}/{{ article.category.url }}">{{ article.category }}</a>{% endif %}{% if article.tags %}{% for tag in article.tags %}<a class = "tag" href="{{ SITEURL }}/{{ tag.url }}">{{ tag }}</a>{% endfor %}{% endif %}
          <!-- don't show the whole article, but we need the whole content for search purposes -->
          <p style = "max-width: 100ch; max-height: 4rem; overflow: hidden;">
            <!-- get article content, but strip any html or codes -->
            {{article.content | striptags | escape }}
          </p>
      </li>
      {% endfor %}
    </ul>
  </section>

</main><!-- /#content -->
{% endblock content %}