{{ define "main" }}

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

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

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

  <section>
    <nav class="scene--list __micro __full">
      <ul>
      {{- range sort .Pages "Title" -}}
        <li data-filter="{{ .Title }} {{ .Params.type_of_company }}">
          <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.type_of_company }}</em>
          </a>
        </li>
      {{- end -}}
      </ul>
    </nav>
  </section>

  <script>
  var companies = [];

  // 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']
          companies.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) {
              companies.map(function (e) {
                  e.node.style.display = '';
                  e.node.classList.remove('__active');
              });
          } else {
              companies.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 }}