{% extends "base.html" %}
{% block title %}
  Corpus List
{% endblock title %}
{% block content %}
  <h1 class="title">Corpora</h1>
  <form id="corpus-selector"
        class="columns"
        hx-target="body"
        hx-swap="outerHTML">
    <div class="column is-one-third">
      <h2 class="title is-4">Selected</h2>
      <p class="subtitle">The following corpora will be included in any analysis.</p>
      {% if session.selected_corpora|length == 0 %}
        <div class="notification is-warning">Currently, no corpus is selected.</div>
      {% else %}
        <div class="field">
          <div class="control">
            <button hx-post="{{ url_prefix }}corpora"
                    class="button"
                    name="clear_selection"
                    value="true">Clear selection</button>
          </div>
        </div>
        <div class="tags notification">
          {% for c in session.selected_corpora %}
            <span class="tag is-medium is-primary">{{ c }}
              <button hx-post="{{ url_prefix }}corpora"
                      class="delete is-small"
                      name="remove_corpus"
                      value="{{ c }}"></button>
            </span>
          {% endfor %}
        </div>
      {% endif %}
    </div>
    <div class="column is-two-thirds">
      <h2 class="title is-4">Available</h2>
      <p class="subtitle">Add corpora you want to analyze.</p>
      <div class="field">
        <div class="control">
          <input class="input"
                 type="text"
                 name="filter"
                 value="{{ filter }}"
                 placeholder="Filter by corpus name"
                 autocomplete="off"
                 hx-post="{{ url_prefix }}corpora"
                 hx-trigger="keyup changed delay:500ms"
                 hx-target="#available-corpora"
                 hx-select="#available-corpora"
                 hx-swap="outerHTML"
                 id="corpus-filter">
        </div>
      </div>
      <div id="available-corpora" class="table-container">
        {% if corpora|length == 0 %}
          <div class="notification is-warning">
            Empty corpus list.
            {% if filter|length != 0 %}Remove the filter "{{ filter }}"" to see all corpora.{% endif %}
          </div>
        {% else %}
          <table class="table is-striped">
            <thead>
              <tr>
                <td>
                  <button hx-post="{{ url_prefix }}corpora"
                          class="button is-small"
                          name="add_all_corpora"
                          value="true">Add all</button>
                </td>
                <td>Corpus name</td>
              </tr>
            </thead>
            <tbody>
              {% for c in corpora %}
                <tr>
                  <td>
                    {% if not c.selected %}
                      <button hx-post="{{ url_prefix }}corpora"
                              name="add_corpus"
                              value="{{ c.name }}"
                              class="button is-small">Add</button>
                    {% endif %}
                  </td>
                  <td class="corpus-name">{{ c.name }}</td>
                </tr>
              {% endfor %}
            </tbody>
          </table>
        {% endif %}
      </div>
    </div>
  </form>
{% endblock content %}