{% 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 class="active" href="#corpus-analysis-app-overview"><i class="nopaque-icons service-icons left" data-service="corpus-analysis"></i>Corpus analysis</a></li>
  <li class="tab col s3"><a 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 "corpora/analyse_corpus.reader.html.j2" %}
{% include "corpora/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="{{ url_for('corpora.corpus', corpus_id=corpus.id) }}">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="example-modal">
  <div class="modal-content">
    <div class="row">
      <div class="col s12">
        <h4>Examples</h4>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod 
        tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero 
        eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea 
        takimata sanctus est Lorem ipsum dolor sit amet.</p>
      </div>
      <div class="col s8">
        <table>
          <tr>
            <th>You are looking for...</th>
            <th>Type in:</th>
            <th>Result:</th>
          </tr>
          <tr>
            <td>The word "begin" </td>
            <td>[word="begin"];</td>
            <td><a class="tooltipped" data-position="bottom" data-tooltip="List all examples of the word within a corpus that you searched for.">Concordance</a> of the word begin</td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</div>

<div class="modal" id="concordance-query-builder">
  <div class="modal-content">
    <div>
      <nav>
        <div class="nav-wrapper" id="query-builder-nav">
          <a href="#!" class="brand-logo"><i class="material-icons">build</i>Query Builder (beta)</a>
          <i class="material-icons close right" id="close-query-builder">close</i>
          <a class="modal-trigger" href="#query-builder-tutorial-modal" >
            <i class="material-icons right tooltipped" id="query-builder-tutorial-info-icon" data-position="bottom" data-tooltip="Click here if you are unsure how to use the Query Builder <br>and want to find out what other options it offers.">help</i>
          </a>
        </div>
      </nav>
    </div>
    
    <p></p>
    
    <div id="query-container" class="hide">
      
      <div class="row">
        <h6 class="col s2">Your Query:
          <a class="modal-trigger" href="#query-builder-tutorial-modal">
          <i class="material-icons left" id="general-options-query-builder-tutorial-info-icon">help_outline</i></a>
        </h6>
      </div>
      <div class="row">
        <div class="col s10" id="your-query"></div>
        <a class="btn-small waves-effect waves-teal col s1" id="insert-query-button">
          <i class="material-icons">send</i>
        </a>
      </div>
      <p><i> Preview:</i></p>
      <p id="query-preview"></p>
      <br>
    </div>
    
    
    <h6>Use the following options to build your query. If you need help, click on the question mark in the upper right corner!</h6>
    <p></p>
    <a class="btn-large waves-effect waves-light tooltipped" id="positional-attr-button" data-position="bottom" data-tooltip="Search for any token, for example a word, a lemma or a part-of-speech tag">Add new token to your query</a>
    <a class="btn-large waves-effect waves-light tooltipped" id="structural-attr-button" data-position="bottom" data-tooltip="Structure your query with structural attributes, for example sentences, entities or annotate the text">Add structural attributes to your query</a>
    
    <div id="structural-attr" class="hide">
      <p></p>
      <h6>Which structural attribute do you want to add to your query?<a class="modal-trigger" href="#query-builder-tutorial-modal"><i class="material-icons left" id="add-structural-attribute-tutorial-info-icon">help_outline</i></a></h6>
      <p></p>
      <div class="row">
        <div class="col s12">
          <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">Meta Data</a>
        </div>
      </div>
      

      <div id="entity-builder" class="hide">
        <p></p>
        <br>
        <div class="row">
          <a class="btn waves-effect waves-light col s4" id="empty-entity">Add Entity of any type</a>
          <p class="col s1 l1"></p>
          <div class= "input-field col s3">
              <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>
                <option value="FAC">FAC</option>
                <option value="GPE">GPE</option>
                <option value="LANGUAGE">LANGUAGE</option>
                <option value="LAW">LAW</option>
                <option value="LOC">LOC</option>
                <option value="MONEY">MONEY</option>
                <option value="NORP">NORP</option>
                <option value="ORDINAL">ORDINAL</option>
                <option value="ORG">ORG</option>
                <option value="PERCENT">PERCENT</option>
                <option value="PERSON">PERSON</option>
                <option value="PRODUCT">PRODUCT</option>
                <option value="QUANTITY">QUANTITY</option>
                <option value="TIME">TIME</option>
                <option value="WORK_OF_ART">WORK_OF_ART</option>
              </select>
              <label>Entity Type</label>
          </div>
          <div class= "input-field col s3">
              <select name="germanenttype" id="german-ent-type">
                <option value="" disabled selected>German ent_type</option>
                <option value="LOC">LOC</option>
                <option value="MISC">MISC</option>
                <option value="ORG">ORG</option>
                <option value="PER">PER</option>
              </select>
          </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>Meta data</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 class="hide" id="no-value-metadata-message"><i>No value entered!</i></div>
        </div>
      </div>
    </div>

    <div id="positional-attr" class="hide">
      <p></p>
      <div class="row" id="token-kind-selector">
        <div class="col s5">
          <h6>Which kind of token are you looking for? <a class="modal-trigger" href="#query-builder-tutorial-modal"><i class="material-icons left" id="token-tutorial-info-icon">help_outline</i></a></h6>
        </div>
        <div class="input-field col s3">
          <select id="token-attr">
            <option value="word" selected>word</option>
            <option value="lemma">lemma</option>
            <option value="english-pos">english pos</option>
            <option value="german-pos">german pos</option>
            <option value="simple-pos-button">simple_pos</option>
            <option value="empty-token">empty token</option>
          </select>
        </div>
      </div>
      <p></p>
      <div id="token-builder-content">
        <div class="row" >
          <div id="token-query"></div>
          
          <div id="word-builder">
              <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>

          <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>

          <div id="english-pos-builder" class="hide">
            <div class="col s6 m4 l4">
              <div class="row">
                <div class= "input-field col s12">
                  <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>
                    <option value="CD">cardinal number</option>
                    <option value="DT">determiner</option>
                    <option value="EX">existential there</option>
                    <option value="FW">foreign word</option>
                    <option value="HYPH">punctuation mark, hyphen</option>
                    <option value="IN">conjunction, subordinating or preposition</option>
                    <option value="JJ">adjective</option>
                    <option value="JJR">adjective, comparative</option>
                    <option value="JJS">adjective, superlative</option>
                  </select>
                  <label>Part-of-speech tags</label>
                </div>
              </div>
            </div>
          </div>
          
          <div id="german-pos-builder" class="hide">
            <div class="col s6 m4 l4">
              <div class="row">
                <div class= "input-field col s12">
                  <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>
                    <option value="APPO">postposition</option>
                    <option value="APPR">preposition; circumposition left</option>
                    <option value="APPRART">preposition with article</option>
                    <option value="APZR">circumposition right</option>
                    <option value="ART">definite or indefinite article</option>
                  </select>
                  <label>Part-of-speech tags</label>
                </div>
              </div>
            </div>
          </div>

          <div id="simplepos-builder" class="hide">
            <div class="col s6 m4 l4">
              <div class="row">
                <div class= "input-field col s12">
                  <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>
                    <option value="AUX">auxiliary verb</option>
                    <option value="CONJ">coordinating conjunction</option>
                    <option value="DET">determiner</option>
                    <option value="INTJ">interjection</option>
                    <option value="NOUN">noun</option>
                    <option value="NUM">numeral</option>
                    <option value="PART">particle</option>
                    <option value="PRON">pronoun</option>
                    <option value="PROPN">proper noun</option>
                    <option value="PUNCT">punctuation</option>
                    <option value="SCONJ">subordinating conjunction</option>
                    <option value="SYM">symbol</option>
                    <option value="VERB">verb</option>
                    <option value="X">other</option>
                  </select>
                  <label>Simple part-of-speech tags</label>
                </div>
              </div>
            </div>
          </div>
          <div class="col s1 l1 center-align">
              <p class="btn-floating waves-effect waves-light" id="token-submit">
                <i class="material-icons right">send</i>
              </p>
          </div>
          <div class="hide" id="no-value-message"><i>No value entered!</i></div>
        </div>
        <div id="token-edit-options">
          <div class="row">
            <h6>Options to edit your token: <a class="modal-trigger" href="#query-builder-tutorial-modal"><i class="material-icons left" id="edit-options-tutorial-info-icon">help_outline</i></a></h6>
          </div>
          <p></p>
          <div class="row">
            <div id="input-options" class="col s5 m5 l5 xl4">
                <a id="wildcard-char" class="btn-small waves-effect waves-light tooltipped" data-position="top" data-tooltip="Look for a variable character (also called wildcard character)">Wildcard character</a>
                <a id="option-group" class="btn-small waves-effect waves-light tooltipped" data-position="top" data-tooltip="Find character sequences from a list of options">Option Group</a>
            </div>
            <div class="col s3 m3 l3 xl3" id="incidence-modifiers-button">
              <a class="dropdown-trigger btn-small  waves-effect waves-light" href="#" data-target="incidence-modifiers" data-position="top" data-tooltip="Incidence Modifiers are special characters or patterns, <br>which determine how often a character represented previously should occur.">incidence modifiers</a>
            </div>
            
            <ul id="incidence-modifiers" class="dropdown-content">
              <li><a id="one-or-more" data-token="+" class="tooltipped" data-position ="top" data-tooltip="...occurrences of the character/token before">one or more (+)</a></li>
              <li><a id="zero-or-more" data-token="*" class="tooltipped" data-position ="top" data-tooltip="...occurrences of the character/token before">zero or more (*)</a></li>
              <li><a id="zero-or-one" data-token="?" class="tooltipped" data-position ="top" data-tooltip="...occurrences of the character/token before">zero or one (?)</a></li>
              <li><a id="exactly-n" class="modal-trigger tooltipped" href="#exactlyN" data-token="{n}" class="" data-position ="top" data-tooltip="...occurrences of the character/token before">exactly n ({n})</a></li>
              <li><a id="between-n-m" class="modal-trigger tooltipped" href="#betweenNM" data-token="{n,m}" class="" data-position ="top" data-tooltip="...occurrences of the character/token before">between n and m ({n,m})</a></li>
            </ul>

            <div id="ignore-case-checkbox" class="col s2 m2 l2 xl2">
              <p id="ignore-case">
                  <label>
                    <input type="checkbox" class="filled-in" />
                    <span>Ignore Case</span>
                  </label>
              </p>
            </div>
            <div class="col s2 m2 l2 xl2" id="condition-container">
              <a class="btn-small tooltipped waves-effect waves-light" id="or" data-position="bottom" data-tooltip="You can add another condition to your token. <br>At least one must be fulfilled">or</a>
              <a class="btn-small tooltipped waves-effect waves-light" id="and" data-position="bottom" data-tooltip="You can add another condition to your token. <br>Both must be fulfilled">and</a>
            </div>
          </div>
        </div>
      </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">
          <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>
   
  </div>
</div>

<div class="modal modal-fixed-footer" id="query-builder-tutorial-modal">
  <div class="modal-content" >
    <div id="query-builder-tutorial-start"></div>
    <ul class="tabs">
      <li class="tab"><a class="active" href="#query-builder-tutorial">Query Builder Tutorial</a></li>
      {# <li class="tab"><a href="#qb-examples">Examples</a></li> #}
      <li class="tab"><a href="#cql-cb-tutorial">Corpus Query Language Tutorial</a></li>
      <li class="tab"><a href="#tagsets-cb-tutorial">Tagsets</a></li>
    </ul>
  
    <div id="query-builder-tutorial">
      {% include "main/manual/_09_query_builder.html.j2" %}
    </div>
    {# <div id="qb-examples"></div> #}
    <div id ="cql-cb-tutorial">
      {% with headline_num=4 %}
        {% include "main/manual/_08_cqp_query_language.html.j2" %}
      {% endwith %}
    </div>
    <div id="tagsets-cb-tutorial">
      <h4>Tagsets</h4>
      {% include "main/manual/_10_tagsets.html.j2" %}
    </div>
    <div class="fixed-action-btn">
      <a class="btn-floating btn-large teal" id="scroll-up-button-query-builder-tutorial" href='#query-builder-tutorial-start'>
        <i class="large material-icons">arrow_upward</i>
      </a>
    </div>
  </div>
</div>

{% endblock modals %}

{% block scripts %}
{{ super() }}
<script>
const corpusAnalysisApp = new CorpusAnalysisApp({{ corpus.hashid|tojson }});
const corpusAnalysisConcordance = new CorpusAnalysisConcordance(corpusAnalysisApp);
const corpusAnalysisReader = new CorpusAnalysisReader(corpusAnalysisApp);
const concordanceQueryBuilder = new ConcordanceQueryBuilder();

corpusAnalysisApp.init();
</script>
{% endblock scripts %}
