<!DOCTYPE html>
<html>
  <head>
    <title>Plugin demo</title>
    <link type="text/css" rel="stylesheet" href="/css/kalamar.css" />
    <!--
        see https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src https://*; child-src 'none';">
    -->
    <script>//<![CDATA[

    window.KorAP = window.KorAP || {};

    //]]></script>  
    <script data-main="plugin-serverdemo.js" src="../js/lib/require.js" async="async"></script>
  </head>
  <body>    
    <p>Start the demo server with <code>morbo -l 'http://*:3003' t/server/plugin.pl</code> and open <a href="http://localhost:3003/demo/plugin-server.html"><code>this website</code></a>.</p>

    <header>
      <form autocomplete="off" action="/kalamar" id="searchform">      
	<div id="searchbar">
	  <input type="search"
		 placeholder="Find ..."
		 name="q"
		 id="q-field"
		 value="abcdefghijklmnopqrstuvwxyz"
		 autofocus="autofocus" />
	  <button id="qsubmit" type="submit"><span>Go</span></button>
	  <!-- <i class="fa fa-arrow-circle-down show-hint" onclick="hint.popUp()"></i> -->
	</div>

        <!-- Search in the following virtual corpus -->
        <div id="vc-view"></div>
        in
        <input id="show" name="show" type="hidden" />
        <!--<input id="collection-name" name="collection-name" type="hidden"> -->
        <input id="cq" name="cq" type="text" value="">
	with <span class="menu select">
	  <select name="ql" id="ql-field">
	    <option value="poliqarp">Poliqarp</option>
	    <option value="cosmas2">Cosmas II</option>
	    <option value="annis">Annis</option>
	    <option value="cql">CQL v1.2</option>
	  </select>
	</span>
	<div class="button right">
	  <input type="checkbox"
		 value="1"
		 name="cutoff"
		 class="checkbox"
		 id="q-cutoff-field" />
	  <label for="q-cutoff-field"><span id="glimpse"></span>Glimpse</label>

	  <!-- Todo: open tutorial - like openTutorial() -->
	  <a href="doc/faq" tabindex="-1" class="question"><span>Question</span></a>
	  <a href="tutorial.html" title="Tutorial" class="tutorial" id="view-tutorial"><span>Tutorial</span></a>
	</div>
      </form>
    </header>
    
    <main> 
        <script>
        KorAP.koralQuery = {
            "matches" : [ "..." ],
            "corpus" : {
              "@type" : "koral:docGroup",
              "operation" : "operation:or",
              "operands" : [ {
                "@type" : "koral:docGroup",
                "operation" : "operation:and",
                "operands" : [ {
                  "@type" : "koral:doc",
                  "key" : "title",
                  "match" : "match:eq",
                  "value" : "Der Birnbaum",
                  "type" : "type:string"
                }, {
                  "@type" : "koral:doc",
                  "key" : "pubPlace",
                  "match" : "match:eq",
                  "value" : "Mannheim",
                  "type" : "type:string"
                }, {
                  "@type" : "koral:docGroup",
                  "operation" : "operation:or",
                  "operands" : [ {
                    "@type" : "koral:doc",
                    "key" : "subTitle",
                    "match" : "match:eq",
                    "value" : "Aufzucht und Pflege",
                    "type" : "type:string"
                  }, {
                    "@type" : "koral:doc",
                    "key" : "subTitle",
                    "match" : "match:eq",
                    "value" : "Gedichte",
                    "type" : "type:string"
                  } ]
                } ]
              }, {
                "@type" : "koral:doc",
                "key" : "pubDate",
                "match" : "match:geq",
                "value" : "2015-03-05",
                "type" : "type:date",
                "rewrites" : [ {
                  "@type" : "koral:rewrite",
                  "operation" : "operation:modification",
                  "src" : "querySerializer",
                  "scope" : "tree"
                } ]
              } ]
            },
            "query" : {
              "wrap" : {
                "layer" : "orth",
                "match" : "match:eq",
                "foundry" : "opennlp",
                "key" : "Goethe",
                "@type" : "koral:term"
              },
              "@type" : "koral:token"
            },
            "meta" : {
              "serialQuery" : "tokens:s:Goethe",
              "startIndex" : 0,
              "version" : "unknown",
              "itemsPerPage" : 25,
              "context" : "p",
              "benchmark" : "0.103553092 s",
              "totalResults" : -1
            }
          };
        </script>

    <div id="resultinfo" class="found"></div>
      <div id="search">
        <ol>
          <li data-corpus-id="WPD"
	            data-doc-id="FFF"
	            data-text-id="01460"
	            data-match-id="p119-120"
	            data-available-info="base/s=spans corenlp/c=spans corenlp/ne=tokens corenlp/p=tokens corenlp/s=spans glemm/l=tokens mate/l=tokens mate/m=tokens mate/p=tokens opennlp/p=tokens opennlp/s=spans tt/l=tokens tt/p=tokens tt/s=spans xip/c=spans malt/d=rels"
	            id="WPD-FFF.01460-p119-120"
	            tabindex="6">
	          <div class="meta">WPD/III/78432</div>
            <div class="match-main">
              <div class="match-wrap">
	              <div class="snippet startMore endMore"><span class="context-left">Der Fehler unterläuft häufig bei der direkten Übersetzung aus dem Englischen, wenn im originalen Ausdruck die beiden Wortteile verschiedene Wörter sind und sich das Adjektiv wahlweise auf das erste oder zweite Wort bezieht. Ein Beispiel ist multiples Testproblem für multiple </span><span class="match">test</span><span class="context-right"> problem.</span></div>
	            </div>
            </div>
	          <p class="ref"><strong>Fehlbezogenes Adjektiv</strong> by Joni2,Peterlustig,BWBot; published on 2005-03-28 as FFF.01460 (WPD)</p>
	        </li>
        </ol>
      </div>
    </main>
  </body>
</html>