<!DOCTYPE html>
<html>
%= include 'partial/header'
  <body>

%# -- Background crab
% if (!param('q') && current_route eq 'index') {
<div id="crab-bg"></div>
% };

% my $location;
% my $search_route;
% unless (current_route 'tutorial') {
<div id="tutorial">
%= javascript begin
document.write('<a href="' + getTutorialPage().replace(/\?embedded=1/, '') + '" ');
document.write('target="_blank"><i title="Open in new tab" ');
document.write('class="fa fa-external-link-square"></i></a>');
% end
  <i onclick="closeTutorial()"
     title="close"
     class="fa fa-toggle-up"></i>
  <iframe src="about:blank"></iframe>
</div>
%   if (current_route eq 'match') {
%     $search_route = url_for('search_corpus');
%     $location = 'in corpus <span class="location">' . stash('corpus_id') . '</span>';
%   }
%   else {
%     $search_route = url_for;
%     if (stash('doc_id')) {
%       $location = ' in document <span class="location">' . stash('corpus_id') . '/' . stash('doc_id') . '</span>';
%     }
%     elsif (stash('corpus_id')) {
%       $location = ' in corpus <span class="location">' . stash('corpus_id') . '</span>';
%     }
%     elsif (stash('collection_id')) {
%       $location = ' in collection <span class="location">' . stash('collection_id') . '</span>';
%     };
%   }
% }
% else {
%   $search_route = url_for('index');
% };

<div id="top">
  <a href="<%= url_for 'index' %>"><h1><span>KorAP- Korpusanalyseplattform der nächsten Generation</span></h1></a>

%= form_for $search_route, autocomplete => 'off', begin
  <div id="searchbar">
%= search_field 'q', id => 'q-field', autofocus => 'autofocus', placeholder => 'Find ...'
    <button type="submit"><i class="fa fa-search"></i></button>
%   if (stash('test_port')) {
    <button type="submit" name="action" value="inspect"><i class="fa fa-code"></i></button>
%   };
    <i onclick="hint.popUp()" class="fa fa-arrow-circle-down show-hint"></i>
  </div>
  <% if ($location) { %><%== $location %><% } %>
  with
  <div class="select">
    %= select_field ql => [[Poliqarp => 'poliqarp'], ['Cosmas II' => 'cosmas2'], ['Annis' => 'annis'], ['CQL v1.2' => 'cql']], id => 'ql-field'
  </div>

<div id="button-right">
%#
%# -- The cutoff checkbox
% unless (param('q')) { param(cutoff => 1) };
%= check_box cutoff => 1, id => 'q-cutoff-field'
<label for="q-cutoff-field"><span></span>Quick</label>
%#
%# -- The tutorial button
% unless (current_route 'tutorial') {
<button type="button" title="Tutorial" onclick="openTutorial()">\
<i class="fa fa-graduation-cap"></i>\
</button>
% };
%#
%# -- The Alignment button
% if (param('q') && (stash('search.totalResults') // 0) != 0) {
<button type="button" title="Alignment" onclick="toggleAlignment(this)">\
<i class="fa fa-align-right"></i>\
</button>
% }
</div>
%#
% end
</div>


%= content 'sidebar' => begin
<div id="sidebar">
  %= include 'collections'
  <i class="fa fa-bars"></i>
</div>
% end


<main>
%= content main => begin
  <p>This is the alternative KorAP Frontend.</p>
  <p>The primary goal is to serve as a testbed for the query serialization and for different flavours of user interfaces.</p>
  <p>Search capabilities are limited to the demo user.</p>
  <p>Currently the frontend only supports recent versions of Mozilla Firefox.</p>
% end
</main>

%= content 'javascript'
%= include 'partial/javascript'
%= notifications 'Alertify', -no_include
  </body>
</html>