<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
%= stylesheet '/style.css'
%= stylesheet '/table.css'
%= stylesheet '/kwic-4.0.css'
%= stylesheet '/fontawesome/font-awesome.min.css'
%= javascript '/jquery-2.0.0.min.js'
%= javascript '/translateTable.js'
<meta charset="utf-8" />
  </head>
  <body>

% unless (current_route 'tutorial') {
<div id="tutorial" style="display: none">
  % 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>
  <i onclick="closeTutorial()" title="close" class="fa fa-toggle-up"></i>
  <iframe src="about:blank" data-src="<%= $tut_page->query([snippet => 1]) %>"></iframe>
</div>
% };

<div id="top">
  <a href="<%= url_for 'index' %>"><h1><span>KorAP- Korpusanalyseplattform der nächsten Generation</span></h1></a>
%= form_for url_for() => begin
%= select_field ql => [[Poliqarp => 'poliqarp'], ['Cosmas II' => 'cosmas2']], id => 'ql-field'
<br />
%= search_field 'q', id => 'q-field'
<button type="submit" name="action" value="ok"><i class="fa fa-search"></i></button>
<button type="submit" name="action" value="inspect"><i class="fa fa-code"></i></button>
% end

<div id="button-right">
% if (param('q')) {
<button type="button" 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>
% }
% unless (current_route 'tutorial') {
<button type="button" onclick="openTutorial()"><i class="fa fa-graduation-cap"></i></button>
% };
</div>

</div>

<div id="sidebar" style="padding-top: 90px">
%= include 'collections'
</div>

<div id="search">
%= content
</div>

%= javascript begin

$("ol > li:not(.active)").on("click", function () {
  $(this).addClass('active');
});

function closeSnippet (o) {
  $(o.parentNode.parentNode).removeClass('active');
};

function showTable (o) {
  var match = o.parentNode.parentNode;
  var table = $(match).children("div").children("div.tokenInfo").first();

  if (table.hasClass("active")) {
    table.removeClass("active");
    return;
  }
  else if (table.children("table").length > 0) {
    table.addClass("active");
    return;
  };

  var corpusID = match.getAttribute('data-corpus-id');
  var docID = match.getAttribute('data-doc-id');
  var matchID = match.getAttribute('data-match-id');
  var url = '/corpus/' + corpusID + '/' + docID + '/' + matchID;
  var snippet;

  jQuery.getJSON(url, function (res) {
    var snippet = new SnippetTable(res['snippet']);
    table.addClass("active");
    table.append(snippet.toTable());
  });
};

function openTutorial (o) {
  var tut = $("#tutorial");
  tut.slideDown();
  var iframe = tut.children("iframe");
  var src = iframe.attr("data-src");
  iframe.attr("src", src);
};

function closeTutorial (o) {
  $("#tutorial").slideUp();
};

function useQuery (o) {
  var q = o.getAttribute("data-query");
  var ql = o.getAttribute("data-query-language");
  $("#ql-field").val(ql);
  $("#q-field").val(q);
  closeTutorial();
};

$("code.query.serial,#sidebar").on("click", function () {
  $(this).toggleClass('active');
});


% end


%= notifications 'Alertify'
  </body>
</html>