{% extends "base.html.j2" %}
{% import "materialize/wtf.html.j2" as wtf %}



{% block main_attribs %} class="service-scheme" data-service="corpus-analysis" id="corpus-analysis-app-container"{% endblock main_attribs %}

{% block page_content %}
<ul class="row tabs no-autoinit" id="corpus-analysis-app-extension-tabs">
  <li class="tab col s3"><a href="#corpus-analysis-app-overview"><i class="nopaque-icons service-icon left" data-service="corpus-analysis"></i>Corpus analysis</a></li>
  <li class="tab col s3"><a class="active" href="#concordance-extension-container"><i class="material-icons left">list_alt</i>Concordance</a></li>
  <li class="tab col s3"><a href="#reader-extension-container"><i class="material-icons left">chrome_reader_mode</i>Reader</a></li>
</ul>

{# <div class="row" id="corpus-analysis-app-overview">
  <div class="col s12">
    <h1>{{ title }}</h1>
  </div>

  <div class="col s3">
    <div class="card extension-selector hoverable" data-target="concordance-extension-container">
      <div class="card-content">
        <span class="card-title"><i class="material-icons left">list_alt</i>Concordance</span>
        <p>Query your corpus with the CQP query language utilizing a KWIC view.</p>
      </div>
    </div>
  </div>

  <div class="col s3">
    <div class="card extension-selector hoverable" data-target="reader-extension-container">
      <div class="card-content">
        <span class="card-title"><i class="material-icons left">chrome_reader_mode</i>Reader</span>
        <p>Inspect your corpus in detail with a full text view, including annotations.</p>
      </div>
    </div>
  </div>
</div> #}
{% include "test/analyse_corpus.concordance.html.j2" %}
{% endblock page_content %}

{% block modals %}
{{ super() }}
<div class="modal no-autoinit" id="corpus-analysis-app-init-modal">
  <div class="modal-content">
    <h4>Initializing session...</h4>
    <p>If the loading takes to long or an error occured,
      <a onclick="window.location.reload()" href="#">click here</a>
      to refresh your session or
      <a href="">go back</a>!
    </p>
    <div class="progress" id="corpus-analysis-app-init-progress">
      <div class="indeterminate"></div>
    </div>
    <p class="error-color-text hide" id="corpus-analysis-app-init-error"></p>
  </div>
</div>



<div class="modal" id="cql-tutorial-modal">
  <div class="modal-content">
    {% with headline_num=4 %}
    {% include "main/manual/_08_cqp_query_language.html.j2" %}
    {% endwith %}
  </div>
</div>

<div class="modal" id="tagsets-modal">
  <div class="modal-content">
    <h4>Tagsets</h4>
    <ul class="tabs">
      <li class="tab"><a class="active" href="#simple_pos-tagset">simple_pos</a></li>
      <li class="tab"><a href="#english-ent_type-tagset">English ent_type</a></li>
      <li class="tab"><a href="#english-pos-tagset">English pos</a></li>
      <li class="tab"><a href="#german-ent_type-tagset">German ent_type</a></li>
      <li class="tab"><a href="#german-pos-tagset">German pos</a></li>
    </ul>

    <div id="simple_pos-tagset">
      <h5>simple_pos tagset</h5>
      <ul>
        <li>ADJ: adjective</li>
        <li>ADP: adposition</li>
        <li>ADV: adverb</li>
        <li>AUX: auxiliary verb</li>
        <li>CONJ: coordinating conjunction</li>
        <li>DET: determiner</li>
        <li>INTJ: interjection</li>
        <li>NOUN: noun</li>
        <li>NUM: numeral</li>
        <li>PART: particle</li>
        <li>PRON: pronoun</li>
        <li>PROPN: proper noun</li>
        <li>PUNCT: punctuation</li>
        <li>SCONJ: subordinating conjunction</li>
        <li>SYM: symbol</li>
        <li>VERB: verb</li>
        <li>X: other</li>
      </ul>
    </div>

    <div id="english-ent_type-tagset">
      <h5>English ent_type tagset</h5>
      <ul>
        <li>CARDINAL: Numerals that do not fall under another type</li>
        <li>DATE: Absolute or relative dates or periods</li>
        <li>EVENT: Named hurricanes, battles, wars, sports events, etc.</li>
        <li>FAC: Buildings, airports, highways, bridges, etc.</li>
        <li>GPE: Countries, cities, states</li>
        <li>LANGUAGE: Any named language</li>
        <li>LAW: Named documents made into laws.</li>
        <li>LOC: Non-GPE locations, mountain ranges, bodies of water</li>
        <li>MONEY: Monetary values, including unit</li>
        <li>NORP: Nationalities or religious or political groups</li>
        <li>ORDINAL: "first" "second" etc.</li>
        <li>ORG: Companies, agencies, institutions, etc.</li>
        <li>PERCENT: Percentage, including "%"</li>
        <li>PERSON: People, including fictional</li>
        <li>PRODUCT: Objects, vehicles, foods, etc. (not services)</li>
        <li>QUANTITY: Measurements, as of weight or distance</li>
        <li>TIME: Times smaller than a day</li>
        <li>WORK_OF_ART: Titles of books, songs, etc.</li>
      </ul>
    </div>

    <div id="english-pos-tagset">
      <h5>English pos tagset</h5>
      <ul>
        <li>ADD: email</li>
        <li>AFX: affix</li>
        <li>CC: conjunction, coordinating</li>
        <li>CD: cardinal number</li>
        <li>DT: determiner</li>
        <li>EX: existential there</li>
        <li>FW: foreign word</li>
        <li>HYPH: punctuation mark, hyphen</li>
        <li>IN: conjunction, subordinating or preposition</li>
        <li>JJ: adjective</li>
        <li>JJR: adjective, comparative</li>
        <li>JJS: adjective, superlative</li>
        <li>LS: list item marker</li>
        <li>MD: verb, modal auxiliary</li>
        <li>NFP: superfluous punctuation</li>
        <li>NN: noun, singular or mass</li>
        <li>NNP: noun, proper singular</li>
        <li>NNPS: noun, proper plural</li>
        <li>NNS: noun, plural</li>
        <li>PDT: predeterminer</li>
        <li>POS: possessive ending</li>
        <li>PRP: pronoun, personal</li>
        <li>PRP$: pronoun, possessive	RB: adverb</li>
        <li>RBR: adverb, comparative</li>
        <li>RBS: adverb, superlative</li>
        <li>RP: adverb, particle</li>
        <li>SYM: symbol</li>
        <li>TO: infinitival "to"</li>
        <li>UH: interjection</li>
        <li>VB: verb, base form</li>
        <li>VBD: verb, past tense</li>
        <li>VBG: verb, gerund or present participle</li>
        <li>VBN: verb, past participle</li>
        <li>VBP: verb, non-3rd person singular present</li>
        <li>VBZ: verb, 3rd person singular present</li>
        <li>WDT: wh-determiner</li>
        <li>WP: wh-pronoun, personal</li>
        <li>WP$: wh-pronoun, possessive</li>
        <li>WRB: wh-adverb</li>
        <li>XX: unknown</li>
        <li>``: opening quotation mark</li>
        <li>$: symbol, currency</li>
        <li>"": closing quotation mark</li>
        <li>: punctuation mark, comma</li>
        <li>-LRB-: left round bracket</li>
        <li>-RRB-: right round bracket</li>
        <li>.: punctuation mark, sentence closer</li>
        <li>:: punctuation mark, colon or ellipsis</li>
      </ul>
    </div>

    <div id="german-ent_type-tagset">
      <h5>German ent_type tagset</h5>
      <ul>
        <li>LOC: Non-GPE locations, mountain ranges, bodies of water</li>
        <li>MISC: Miscellaneous entities, e.g. events, nationalities, products or works of art</li>
        <li>ORG: Companies, agencies, institutions, etc.</li>
        <li>PER: Named person or family.</li>
      </ul>
    </div>

    <div id="german-pos-tagset">
      <h5>German pos tagset</h5>
      <ul>
        <li>ADJA: adjective, attributive</li>
        <li>ADJD: adjective, adverbial or predicative</li>
        <li>ADV: adverb</li>
        <li>APPO: postposition</li>
        <li>APPR: preposition; circumposition left</li>
        <li>APPRART: preposition with article</li>
        <li>APZR: circumposition right</li>
        <li>ART: definite or indefinite article</li>
        <li>CARD: cardinal number</li>
        <li>FM: foreign language material</li>
        <li>ITJ: interjection</li>
        <li>KOKOM: comparative conjunction</li>
        <li>KON: coordinate conjunction</li>
        <li>KOUI: subordinate conjunction with \zu\ and infinitive</li>
        <li>KOUS: subordinate conjunction with sentence</li>
        <li>NE: proper noun</li>
        <li>NN: noun, singular or mass</li>
        <li>NNE: proper noun</li>
        <li>PDAT: attributive demonstrative pronoun</li>
        <li>PDS: substituting demonstrative pronoun</li>
        <li>PIAT: attributive indefinite pronoun without determiner</li>
        <li>PIS: substituting indefinite pronoun</li>
        <li>PPER: non-reflexive personal pronoun</li>
        <li>PPOSAT: attributive possessive pronoun</li>
        <li>PPOSS: substituting possessive pronoun</li>
        <li>PRELAT: attributive relative pronoun</li>
        <li>PRELS: substituting relative pronoun</li>
        <li>PRF: reflexive personal pronoun</li>
        <li>PROAV: pronominal adverb</li>
        <li>PTKA: particle with adjective or adverb</li>
        <li>PTKANT: answer particle</li>
        <li>PTKNEG: negative particle</li>
        <li>PTKVZ: separable verbal particle</li>
        <li>PTKZU: "zu" before infinitive</li>
        <li>PWAT: attributive interrogative pronoun</li>
        <li>PWAV: adverbial interrogative or relative pronoun</li>
        <li>PWS: substituting interrogative pronoun</li>
        <li>TRUNC: word remnant</li>
        <li>VAFIN: finite verb, auxiliary</li>
        <li>VAIMP: imperative, auxiliary</li>
        <li>VAINF: infinitive, auxiliary</li>
        <li>VAPP: perfect participle, auxiliary</li>
        <li>VMFIN: finite verb, modal</li>
        <li>VMINF: infinitive, modal</li>
        <li>VMPP: perfect participle, modal</li>
        <li>VVFIN: finite verb, full</li>
        <li>VVIMP: imperative, full</li>
        <li>VVINF: infinitive, full</li>
        <li>VVIZU: infinitive with "zu" full</li>
        <li>VVPP: perfect participle, full</li>
        <li>XY: non-word containing non-letter</li>
        <li>$(: other sentence-internal punctuation mark</li>
        <li>$,: comma</li>
        <li>$.: sentence-final punctuation mark</li>
      </ul>
    </div>
  </div>
</div> 


<div class="modal" id="concordance-query-builder" style="width:70%;">
  <div class="modal-content">
    <h4>Query-Builder</h4>
    <ul class="tabs">
      <li class="tab"><a class="active" href="#structural-attr">Add structural attributes</a></li>
      <li class="tab"><a href="#positional-attr">Add new token</a></li>
    </ul>
    
    <div id="structural-attr">
      <p></p>
      <a class="btn-small waves-effect waves-light" id="sentence">sentence</a>
      <a class="btn-small waves-effect waves-light" id="entity">entity</a>
      <a class="btn-small waves-effect waves-light" id="text-annotation">text annotation</a>

      <div id="entity-builder" class="hide">
        <p></p>
        <br>
        <div class="row">
          <a class="btn waves-effect waves-light col s3 l2" id="empty-entity">Add Entity of any type</a>
          <p class="col s1 l1"></p>
          <div class= "input-field col s4 l3">
              <select name="englishenttype" id="english-ent-type">
                <option value="" disabled selected>English ent_type</option>
                <option value="CARDINAL">CARDINAL</option>
                <option value="DATE">DATE</option>
                <option value="EVENT">EVENT</option>
              </select>
              <label>Entity Type</label>
          </div>
        </div>
      </div>
    

      <div id="text-annotation-builder" class="hide">
        <p></p>
        <br>
        <div class="row">
          <div class= "input-field col s4 l3">
            <select name="text-annotation-options" id="text-annotation-options">
              <option class="btn-small waves-effect waves-light" value="address">address</option>
              <option class="btn-small waves-effect waves-light" value="author">author</option>
              <option class="btn-small waves-effect waves-light" value="booktitle">booktitle</option>
              <option class="btn-small waves-effect waves-light" value="chapter">chapter</option>
              <option class="btn-small waves-effect waves-light" value="editor">editor</option>
              <option class="btn-small waves-effect waves-light" value="institution">institution</option>
              <option class="btn-small waves-effect waves-light" value="journal">journal</option>
              <option class="btn-small waves-effect waves-light" value="pages">pages</option>
              <option class="btn-small waves-effect waves-light" value="publisher">publisher</option>
              <option class="btn-small waves-effect waves-light" value="publishing year">publishing year</option>
              <option class="btn-small waves-effect waves-light" value="school">school</option>
              <option class="btn-small waves-effect waves-light" value="title">title</option>
            </select>
            <label>text annotation</label>
          </div>
          <div class= "input-field col s7 l5">
            <i class="material-icons prefix">mode_edit</i>
            <input placeholder="Type in your text annotation" type="text" id="text-annotation-input">
          </div>
          <div class="col s1 l1 center-align">
            <p class="btn-floating waves-effect waves-light" id="text-annotation-submit">
              <i class="material-icons right">send</i>
            </p>
          </div>

        </div>
      </div>
    </div>
    
    {# #region test #}

    <div id="positional-attr">
      <p></p>
      <div class="row">
        <div id="token-attr" class="col s12">
            <a class="btn-small waves-effect waves-light" id="empty-token" style="background-color:#43c6fc">empty token</a>
            <a class="btn-small waves-effect waves-light" id="word" style="background-color:#ef60b4">word</a>
            <a class="btn-small waves-effect waves-light" id="lemma" style="background-color:#ef60b4">lemma</a>
            <a class="btn-small waves-effect waves-light" id="pos" style="background-color:#ef60b4">pos</a>
            <a class="btn-small waves-effect waves-light" id="simple-pos-button" style="background-color:#ef60b4">simple_pos</a>
            <a class="btn-small waves-effect waves-light disabled" id="or" style="background-color:#fc0">or</a>
            <a class="btn-small waves-effect waves-light disabled" id="and" style="background-color:#fc0">and</a>
            <a class="dropdown-trigger btn-small disabled waves-effect waves-light" href="#" data-target="incidence-modifiers" style="background-color:#2fbbab">incidence modifiers</a>
        </div>
      </div>
      <div id="token-builder-content">
    {# #endregion test #}


        <div class="row">
          

          <div id="word-builder" class="hide">
              <div class= "input-field col s3 l4">
                <i class="material-icons prefix">mode_edit</i>
                <input placeholder="Type in your word" type="text" id="word-input">
              </div>
              <div class="col s1 l1 center-align">
                <p class="btn-floating waves-effect waves-light" id="word-submit">
                  <i class="material-icons right">send</i>
                </p>
              </div>
          </div>

          <div id="lemma-builder" class="hide" >
              <div class= "input-field col s3 l4">
                <i class="material-icons prefix">mode_edit</i>
                <input placeholder="Type in your lemma" type="text" id="lemma-input">
              </div>
              <div class="col s1 l1 center-align">
                <p class="btn-floating waves-effect waves-light" id="lemma-submit">
                  <i class="material-icons right">send</i>
                </p>
              </div>
          </div>

          <div id="input-options" class="col s6 l4 hide center-align">
              <p id="wildcard-char" class="btn-small tooltipped waves-effect waves-light" data-position="top" data-tooltip="Wildcard Character">.</p>
              <p id="option-group" class="btn-small waves-effect waves-light">Option Group</p>
              <a class="dropdown-trigger btn-small waves-effect waves-light" href="#" data-target="incidence-modifiers-text-builder" style="background-color:#2fbbab">incidence modifiers</a>
          </div>

          <div id="ignore-case-checkbox" class="hide col s2 l3">
            <p id="ignore-case">
                <label>
                  <input type="checkbox" class="filled-in" />
                  <span>Ignore Case</span>
                </label>
            </p>
          </div>
        </div>

        <ul id="incidence-modifiers-text-builder" class="dropdown-content">
          <li><a id="one-or-more-tb" data-token="+">one or more</a></li>
          <li><a id="zero-or-more-tb" data-token="*">zero or more</a></li>
          <li><a id="zero-or-one-tb" data-token="?">zero or one</a></li>
          <li><a id="exactly-n-tb" data-token="{n}">exactly n</a></li>
          <li><a id="between-n-m-tb" data-token="{n,m}" >between n and m</a></li>
        </ul>
        

        <div id="pos-builder" class="hide">
          <div class="col s12 m9 l9">
            <div class="row">
              <div class= "input-field col s4 l3">
                <select name="englishpos" id="english-pos">
                  <option value="default" disabled selected>English pos tagset</option>
                  <option value="ADD">email</option>
                  <option value="AFX">affix</option>
                  <option value="CC">conjunction, coordinating</option>
                </select>
                <label>Part-of-speech tags</label>
              </div>
              <div class= "input-field col s4 l3">
                <select name="germanpos" id="german-pos">
                  <option value="default" disabled selected>German pos tagset</option>
                  <option value="ADJA">adjective, attributive</option>
                  <option value="ADJD">adjective, adverbial or predicative</option>
                  <option value="ADV">adverb</option>
                </select>
              </div>
            </div>
          </div>
        </div>

        <div id="simplepos-builder" class="hide">
          <div class="col s12 m9 l9">
            <div class="row">
              <div class= "input-field col s4 l3">
                <select name="simplepos" id="simple-pos">
                  <option value="default" disabled selected>simple_pos tagset</option>
                  <option value="ADJ">adjective</option>
                  <option value="ADP">adposition</option>
                  <option value="ADV">adverb</option>
                </select>
                <label>Simple part-of-speech tags</label>
              </div>
            </div>
          </div>
        </div>

        <ul id="incidence-modifiers" class="dropdown-content">
          <li><a id="one-or-more" data-token="+">one or more</a></li>
          <li><a id="zero-or-more" data-token="*">zero or more</a></li>
          <li><a id="zero-or-one" data-token="?">zero or one</a></li>
          <li><a id="exactly-n" class="modal-trigger" href="#exactlyN" data-token="{n}">exactly n</a></li>
          <li><a id="between-n-m" class="modal-trigger" href="#betweenNM" data-token="{n,m}" >between n and m</a></li>
        </ul>

      </div>

      <div id ="exactlyN" class="modal">
          <div class="row modal-content">
            <div class= "input-field col s10">
                <i class="material-icons prefix">mode_edit</i>
                <input placeholder="type in a number for 'n'" type="text" id="n-input">
            </div>
            <div class="col s2">
              <p class="btn-floating waves-effect waves-light" id="n-submit">
                <i class="material-icons right">send</i>
              </p>
            </div>
          </div>
      </div>

      <div id ="betweenNM" class="modal" style="width:60%;">
          <div class="row modal-content">
            <div class= "input-field col s5">
                <i class="material-icons prefix">mode_edit</i>
                <input placeholder="number for 'n'" type="text" id="n-m-input">
            </div>
            <div class= "input-field col s5">
                <i class="material-icons prefix">mode_edit</i>
                <input placeholder="number for 'm'" type="text" id="m-input">
            </div>
            <div class="col s2">
              <p class="btn-floating waves-effect waves-light" id="n-m-submit">
                <i class="material-icons right">send</i>
              </p>
            </div>
          </div>
      </div>

      <div id="token-query"></div>
      <p></p>
      <a class="btn waves-effect disabled waves-light" style="background-color:#00426f" id="build-token-button">
          Add token 
          <i class="material-icons right">check</i>
      </a>
    </div>

    <br><hr>
    <div>
      <h5>Your Query</h5>
      <p><i>Examples: </i></p>
      <p>
        &lt;ent_type=&quot;PERSON&quot;&gt; []* &lt;/ent_type&gt; []* 
        [simple_pos=&quot;VERB&quot;] :: match.text_publishing_year=&quot;1991&quot;;
      </p>
      <div id="button-preparer"></div>
      <div id="your-query"></div>
      <p></p>
      <a class="btn disabled waves-effect waves-light" id="insert-query-button" style="background-color:#00426f">
          Insert 
          <i class="material-icons right">send</i>
      </a>
    </div>
  </div>
</div>

{% endblock modals %}

{% block scripts %}
{{ super() }}
<script>


const concordanceQueryBuilder = new ConcordanceQueryBuilder(word)
</script>
{% endblock scripts %}