{% extends "base.html" %}
{% block title %}
  Export CSV
{% endblock title %}
{% block content %}
  <article>
    <h1 class="title">Export CSV</h1>
    <p class="subtitle">
      The CSV Exporter exports only the values of the elements searched for by the user,
      ignoring the context around search results.
      The values for all annotations of each of the found nodes
      is given in a comma-separated table (CSV).
    </p>
    <form>
      <div class="field is-horizontal"
           hx-include="closest form"
           hx-target="#export-example-output"
           hx-select="#export-example-output"
           hx-swap="outerHTML">
        <div class="field-label">
          <label class="label">Query</label>
        </div>
        <div class="field-body">
          <div class="field">
            <div class="control">
              <textarea name="query"
                        id="aql-input"
                        class="textarea is-family-code"
                        placeholder='To search for all token use the following query: tok '
                        hx-get="{{ url_prefix }}export"
                        hx-trigger="keyup changed delay:500ms"></textarea>
            </div>
            <p class="help">
              Query used to execute the search. See the
              <a href="https://korpling.github.io/ANNIS/4.10/user-guide/aql/">documentation</a>
              for more inforation on the ANNIS Query Language (AQL),
            </p>
          </div>
        </div>
      </div>
      <div class="field is-horizontal"
           hx-include="closest form"
           hx-target="#export-example-output"
           hx-select="#export-example-output"
           hx-swap="outerHTML">
        <div class="field-label">
          <label class="label">Text export options</label>
        </div>
        <div class="field-body">
          <div class="field is-grouped">
            {% if segmentations | length > 1 %}
              <div class="control">
                <label class="label">based on</label>
                <select name="span_segmentation"  hx-get="{{ url_prefix }}export">
                  <option value="">Token</option>
                  {% for seg in segmentations %}
                    {% if config.span_segmentation == seg %}
                      <option value="{{ seg }}" selected>{{ seg }}</option>
                    {% else %}
                      <option value="{{ seg }}">{{ seg }}</option>
                    {% endif %}
                  {% endfor %}
                </select>
              </div>
            {% endif %}
            <div class="control">
              <label class="label">left context</label>
              <select name="left_context"  hx-get="{{ url_prefix }}export">
                {% for ctx in default_context_sizes %}
                  {% if config.left_context == ctx %}
                    <option value="{{ ctx }}" selected>{{ ctx }}</option>
                  {% else %}
                    <option value="{{ ctx }}">{{ ctx }}</option>
                  {% endif %}
                {% endfor %}
              </select>
            </div>
            <div class="control">
              <label class="label">right context</label>
              <select name="right_context"  hx-get="{{ url_prefix }}export">
                {% for ctx in default_context_sizes %}
                  {% if config.right_context == ctx %}
                    <option value="{{ ctx }}" selected>{{ ctx }}</option>
                  {% else %}
                    <option value="{{ ctx }}">{{ ctx }}</option>
                  {% endif %}
                {% endfor %}
              </select>
            </div>
            <p class="help">
              Controls the "text" column of the export.
              {% if segmentations | length > 1 %}
                Choose a segmentation the text should be based on and the
                left and right context in token to include.
                The special "Token" segmentation corresponds the minimal token layer, which can correspond to timeline items in corpora that are aligned by a timeline.
              {% else %}
                Choose a left and right context in token to include.
              {% endif %}
            </p>
          </div>
        </div>
      </div>
      {% include "export/job.html" %}
      <h2 class="title is-4">Example output</h2>
      <div id="export-example-output">{% include "export/example-output.html" %}</div>
    </form>
  </article>
{% endblock content %}