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

%# Background-image
<% unless (param('q')) { %><div id="crab-bg"></div><% } %>

% my $location;
% my $search_route;
% unless (current_route 'tutorial') {
<div id="tutorial">
%#   my $tut_page = url_for(session('tutorial') || 'tutorial');
%#  <a href="<%= $tut_page %>"
%#     target="_blank"><i title="Open in new tab"
%#                        class="fa fa-external-link-square"></i></a>
%#
%#  <a href="javascript:window.open(getTutorialPage())"
%#     target="_blank"><i title="Open in new tab"
%#                        class="fa fa-external-link-square"></i></a>
%= 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>
%#          data-src="<%= $tut_page->query([embedded => 1]) %>"></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>
%   };
  </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">
% unless (param('q')) { param(cutoff => 1) };
%= check_box cutoff => 1, id => 'q-cutoff-field'
<label for="q-cutoff-field"><span></span>Quick</label>
% unless (current_route 'tutorial') {
<button type="button" title="Tutorial" onclick="openTutorial()"><i class="fa fa-graduation-cap"></i></button>
% };
% if (param('q')) {
<button type="button" title="Alignment" onclick="$('#search > ol').toggleClass('left-aligned right-aligned'); $(this).children('i').toggleClass('fa-align-right fa-align-left')"><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>