% if (param 'q') {
% content 'main' => begin
%     unless (param 'snippet') {
<div style="clear: both">
%       my $url = url_with->query(['p' => '{page}']);
%       my $pages;
%       $pages = stash('search.totalResults') == -1 ? -1 : (stash('search.totalResults') / (stash('search.itemsPerPage') || 1));
  <div id="pagination"><%= pagination(stash('search.startPage'), $pages, $url) =%></div>
  <p class="found">Found
% my $found = stash('search.totalResults');
% if ($found == -1) {
%   $found = 'unknown amount of';
% } elsif (stash('search.timeExceeded')) {
%   $found = 'more than ' . $found;
% }; 
    <span id="total-results"><%= $found %> matches</span>
    <% if (stash 'search.benchmark') { %> in <%= stash 'search.benchmark' %><% } %>
  </p>
</div>
%= include 'query'
%= include 'api-communication'
%     };

% if (stash('search.totalResults') != 0 && scalar @{stash('search.hits')}) {
<div id="search">
<ol class="align-left">
%=    search_hits begin
%=      include 'match', match => $_
%     end
</ol>
</div>
% };
% end

% content 'javascript' => begin
%=   javascript begin

var openLi = function (e) {
  this.classList.add("active");
  e.stopPropagation();
};

var closeLi = function (e) {
  this.parentNode.parentNode.classList.remove("active");
  e.stopPropagation();
};

var inactiveLi = document.querySelectorAll("#search > ol > li:not(.active)");
for (var i = 0; i < inactiveLi.length; i++) {
  inactiveLi[i].addEventListener("click", openLi, false);
  inactiveLi[i].getElementsByClassName("close")[0].addEventListener("click", closeLi, false);
};

%   end
% end
% };