{{ define "main" }}

<h1>Resultados da pesquisa por <span class='query'></span></h1>

<div id='search-results'>
</div>

<script src="https://files.stork-search.net/releases/v1.6.0/stork.js"></script>
<script type='text/javascript'>
  const articles = [
    {{ range $index, $page := site.Pages }}
      {{ $cover := (index (.Resources.ByType "image") 0) }}
      {
        "url": {{ $page.Permalink }},
        "title": {{ $page.Title }},
        "author": {{ $page.Params.author }},
        "summary": {{ $page.Summary }},
        "published_date": {{ time.Format "02 de January, 2006" .Date }},
        "cover_url": {{ $cover.Permalink }},
        "cover_description": {{ $page.Params.coverdescription }},
        "categories": [
          {{ range $index2, $category := $page.GetTerms "categories" }}
          {
            "url": {{ $category.Permalink }},
            "title": {{ $category.Title }}
          }{{ if ne (add $index2 1) (len $page.Params.categories) }}, {{ end }}
          {{ end }}
        ]
      }{{ if not (eq (add $index 1) ($.Pages.Len)) }},{{ end }}
    {{ end }}
  ];

  window.addEventListener('load', async () => {
    const query = (new URLSearchParams(document.location.search)).get("s");
    document.querySelector('.query').innerText = query;
    document.querySelector('input[type=search]').value = query;

    stork.initialize();
    await stork.downloadIndex("artigos", "/pesquisa.st", {});
    const search = stork.search("artigos", query);

    if (search.results.length == 0) {
      document.querySelector('#search-results').innerHTML = "<p>Não há resultados para essa pesquisa.</p>";
    } else {
      document.querySelector('#search-results').innerHTML = "<ul class='articles detailed'></ul>";

      search.results.forEach((result) => {
        const url = `${search.url_prefix}${result.entry.url}/`;
        const article = articles.find((a) => a.url == url);

        const match = document.createElement('li');

        {
          const img = document.createElement('img');
          img.setAttribute('src', article.cover_url);
          img.setAttribute('alt', article.cover_description);
          img.setAttribute('title', article.cover_description);
          match.appendChild(img);
        }

        {
          const title = document.createElement('h2');
          const link = title.appendChild(document.createElement('a'));
          link.setAttribute('href', url);
          link.innerText = result.entry.title;
          match.appendChild(title);
        }

        {
          const summary = document.createElement('div');
          summary.classList.add('summary');
          summary.innerText = article.summary;
          match.appendChild(summary);
        }

        {
          const readmore = document.createElement('p');
          readmore.classList.add('readmore');
          const link = readmore.appendChild(document.createElement('a'));
          link.setAttribute('href', url);
          link.innerText = "Ler artigo completo →";
          match.appendChild(readmore);
        }

        {
          const byline = document.createElement('p');
          byline.classList.add('byline');

          byline.appendChild(document.createTextNode(`Publicado por ${article.author} // `));

          if (article.categories.length == 0) {
            byline.appendChild(document.createTextNode(`Sem categoria`));
          } else {
            article.categories.forEach((category, index) => {
              const link = byline.appendChild(document.createElement('a'));
              link.setAttribute('href', category.url);
              link.innerText = category.title;
              if (index + 1 != article.categories.length) {
                byline.appendChild(document.createTextNode(", "));
              }
            });
          }

          byline.appendChild(document.createTextNode(` // `));
          const link = byline.appendChild(document.createElement('a'));
          link.setAttribute('href', url);
          link.innerText = article.published_date;

          match.appendChild(byline);
        }

        document.querySelector('#search-results ul').appendChild(match);

      });
    }
  });
</script>
{{ end }}