{{ define "main" }}

  <h1 class="pill">The Scene</h1>
  <h1 class="pill __sub">People</h1>

  <section class="scene--search">
    <div>
      <input type="text" name="filter" placeholder="Search people" id="param_filter" autocomplete="off" />
      <button type="button"><i class="icon-search"></i></button>
    </div>

    <p class="tip">Either search for a person's name, or search for a type of person to get started. Try searching for <em>Aaron</em> or <em>Baritone</em>, for example.</p>
  </section>

  <section>
    <nav class="scene--list __micro __full">
      <ul>
      {{- range sort .Pages "Title" -}}
        <li data-filter="{{ .Title }} {{ .Params.discipline }}">
          <a href="{{ .Permalink }}">
            <picture class="scene--list-item_image">
              {{ $imgsm := replace .Params.primary_image "/upload/" "/upload/w_150,h_150,c_fill,g_center/" }}
              {{ $imglg := replace .Params.primary_image "/upload/" "/upload/w_300,h_300,c_fill,g_center/" }}
              <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkkAQAAB8AG7jymN8AAAAASUVORK5CYII=" data-srcset="{{ $imgsm }} 1x, {{ $imglg }} 2x" alt="{{ .Title | htmlUnescape }}" media="(min-width: 40em)" class="lazyload">
            </picture>            
            <span>{{ .Title }}</span>
            <em>{{ .Params.discipline }}</em>
          </a>
        </li>
      {{- end -}}
      </ul>
    </nav>
  </section>

  <script>
    var people = [];
  
    // search filter
    window.addEventListener('load', function () {
        var list = document.querySelectorAll('li[data-filter]');
        Array.prototype.forEach.call(list, function (e, i) {
            var name = e.attributes['data-filter']
            people.push({
                node: e,
                name: name.value.toLowerCase() || null
            });
        });
        document.querySelector('input#param_filter').addEventListener('keyup', function (e) {
            var text = e.target.value.toLowerCase();
            if (text.length < 1) {
                people.map(function (e) {
                    e.node.style.display = '';
                    e.node.classList.remove('__active');
                });
            } else {
                people.map(function (e) {
                    e.node.style.display = 'none';
                    e.node.classList.remove('__active');
                    return e;
                }).filter(function (e) {
                    return (e.name.indexOf(text) > -1);
                }).map(function (e) {
                    e.node.style.display = '';
                    e.node.classList.add('__active');
                });
            }
        });
    });
  
  
    // fixed search bar
    window.addEventListener('scroll', function() {
      var $search = document.querySelector('.scene--search');
      var $body = document.querySelector('body');
      var $footer = document.querySelector('.page--footer');
  
      var content_threshold = $body.offsetHeight - $footer.offsetHeight;
      var search_offset = offset($search);
  
      var st = window.pageYOffset;
  
      if (st > search_offset.top - 40 && st < content_threshold - 340 ) {
        $search.classList.add('__fixed');
      } else {
        $search.classList.remove('__fixed');
      }
  
    })
  </script>
{{ end }}