<!doctype html>
<html>
  <head>
    <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
    <title>Haloboard</title>
    <script>
      function filter_elements(){
        const filter_str = document.getElementById("filter").value.trim();
        const filter_re = new RegExp(filter_str);
        let elements = document.querySelectorAll(".halo-section");
        if (!filter_str){
          for (let e of elements ){
            e.hidden = false;
          }
        }else {
          for (let e of elements ){
            e.hidden = true;
            if(filter_re.test(e.id)){
              e.hidden = false;
            }else {
              e.hidden = true;
            }
          }
        }

      }
    </script>
  </head>
  <body onload="filter_elements()">
    <main>
      <div class="container">
        <div class="input-filter">
          <input type="text" id="filter" placeholder="Filter paths with regex"  oninput="filter_elements()">
        </div>
        {% for p in image_paths %}
        <section class="halo-section" id="{{ p }}" >
          <h4>{{ p }}</h4>
          <img src="{{ p }}" loading="lazy">
        </section>
        {% endfor %}
      </div>
    </main>
  </body>
</html>
