<div class="row" id="concordance-extension-container">
  <div class="col s12">
    <div class="card">
      <div class="card-content">
        <form id="concordance-extension-form">
          <div class="row">
            <div class="input-field col s12 m9">
              <i class="material-icons prefix">search</i>
              <input class="validate corpus-analysis-action" id="concordance-extension-form-query" name="query" type="text" required pattern=".*\S+.*" placeholder="Type in your query or use the Query Builder on the right"</input>
              <label for="concordance-extension-form-query">Query</label>
              <span class="error-color-text helper-text hide" id="concordance-extension-error"></span>
              <a class="modal-trigger" href="#cql-tutorial-modal" style="margin-left: 40px;"><i class="material-icons" style="font-size: inherit;">help</i> Corpus Query Language tutorial</a>
              <span> | </span>
              <a class="modal-trigger" href="#tagsets-modal"><i class="material-icons" style="font-size: inherit;">info</i> Tagsets</a>
              <span> | </span>
              <a class="modal-trigger" href="#example-modal"><i class="material-icons" style="font-size: inherit;">info</i> Examples</a>
            </div>
            <div class="input-field col s12 m3">
              <i class="material-icons prefix">arrow_forward</i>
              <input class="validate corpus-analysis-action" id="concordance-extension-form-subcorpus-name" name="subcorpus-name" type="text" required pattern="^[A-Z][a-z0-9\-]*" value="Last"></input>
              <label for="concordance-extension-form-subcorpus-name">Subcorpus name</label>
            </div>
            <div class="col s12 m9 l9">
              <div class="row">
                <div class="input-field col s4 l3">
                  <i class="material-icons prefix">short_text</i>
                  <select class="corpus-analysis-action" name="context">
                    <option value="10" selected>10</option>
                    <option value="15">15</option>
                    <option value="20">20</option>
                    <option value="25">25</option>
                    <option value="30">30</option>
                  </select>
                  <label>Context</label>
                </div>
                <div class="input-field col s4 l3">
                  <i class="material-icons prefix">format_list_numbered</i>
                  <select class="corpus-analysis-action" name="per-page">
                    <option value="10" selected>10</option>
                    <option value="15">15</option>
                    <option value="20">20</option>
                    <option value="25">25</option>
                  </select>
                  <label>Matches per page</label>
                </div>
                <div class="input-field col s4 l3">
                  <i class="material-icons prefix">format_shapes</i>
                  <select name="text-style">
                    <option value="0">Plain text</option>
                    <option value="1" selected>Highlight entities</option>
                    <option value="2">Token text</option>
                  </select>
                  <label>Text style</label>
                </div>
                <div class="input-field col s4 l3">
                  <i class="material-icons prefix">format_quote</i>
                  <select name="token-representation">
                    <option value="lemma">lemma</option>
                    <option value="pos">pos</option>
                    <option value="simple_pos">simple_pos</option>
                    <option value="word" selected>word</option>
                  </select>
                  <label>Token representation</label>
                </div>
              </div>
            </div>
            <div class="col s12 m3 l3 right-align">
              <p class="hide-on-small-only">&nbsp;</p>
              <a class="btn waves-effect waves-light modal-trigger" href="#concordance-query-builder" id="concordance-query-builder-button">
                <i class="material-icons left">build</i>
                Query builder (beta)
              </a>
              <button class="btn waves-effect waves-light corpus-analysis-action" id="concordance-extension-form-submit" type="submit" name="submit">
                Send 
                <i class="material-icons right">send</i>
              </button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>

  <div class="col s12">
    <div id="concordance-extension-subcorpus-list"></div>

    <div class="card">
      <div class="card-content">
        <div class="progress hide" id="concordance-extension-progress">
          <div class="indeterminate"></div>
        </div>
        <div class="row">
          <div class="col s9"><p class="hide" id="concordance-extension-subcorpus-info"></p></div>
          <div class="col s3 right-align" id="concordance-extension-subcorpus-actions"></div>
        </div>
        <table class="highlight">
          <thead>
            <tr>
              <th style="width: 2%;"></th>
              <th style="width: 8%;">Source</th>
              <th class="right-align" style="width: 22.5%;">Left context</th>
              <th class="center-align" style="width: 40%;">KWIC</th>
              <th class="left-align" style="width: 22.5%;">Right Context</th>
              <th class="left-align" style="width: 5%;"></th>
            </tr>
          </thead>
          <tbody id="concordance-extension-subcorpus-items"></tbody>
        </table>
        <ul class="pagination hide" id="concordance-extension-subcorpus-pagination"></ul>
      </div>
    </div>
  </div>
</div>
