{% extends "base.html.j2" %}

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

{% block page_content %}
<div class="corpus-list no-autoinit" id="corpus-list">
  <div class="parallax-container">
    <div class="parallax"><img src="{{ url_for('static', filename='images/parallax_hq/canvas.png') }}"></div>
    <div style="position: absolute; bottom: 0; width: 100%;">
      <div class="container">
        <div class="white-text">
          <h1 id="title"><i class="nopaque-icons" style="font-size: inherit;">I</i>Corpora</h1>
        </div>
        <div class="white" style="padding: 1px 35px 0 10px; border-radius: 35px;">
          <div class="input-field">
            <i class="material-icons prefix">search</i>
            <input class="search" id="corpus-list-search" type="text">
            <label for="corpus-list-search">Search corpus</label>
          </div>
        </div>
      </div>
    </div>
  </div>


  <div class="row">
    <div class="col s12" id="corpora">
      <div class="card">
        <div class="card-content">
          <div>
            <table>
              <thead>
                <tr>
                  <th></th>
                  <th>Title and Description</th>
                  <th>Status</th>
                  <th></th>
                </tr>
              </thead>
              <tbody class="list"></tbody>
            </table>
            <ul class="pagination"></ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock page_content %}


{% block scripts %}
{{ super() }}
<script>
  let corpusListElement = document.querySelector('#corpus-list');
  let corpusListOptions = {
    initialHtmlGenerator: null,
    item: `
      <tr class="clickable hoverable">
        <td><a class="btn-floating disabled"><i class="material-icons service-color darken" data-service="corpus-analysis">book</i></a></td>
        <td><b class="title"></b><br><i class="description"></i></td>
        <td><span class="status badge new corpus-status-color corpus-status-text" data-badge-caption=""></span></td>
        <td class="right-align">
          <a class="action-button btn-floating service-color darken waves-effect waves-light" data-action="view" data-service="corpus-analysis"><i class="material-icons">send</i></a>
        </td>
      </tr>
    `.trim(),
  };
  let corpusList = new CorpusList(corpusListElement, corpusListOptions);
  corpusList._init({{ corpora|tojson }});
</script>
{% endblock scripts %}
