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

{% set full_width = False %}
{% set roadmap = False %}

{% block page_content %}
<div class="col s12" id="corpora">
  <h3>My Corpora</h3>
  <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,</p>
  <div class="card">
    <div class="card-content">
      <div class="input-field">
        <i class="material-icons prefix">search</i>
        <input id="search-corpus" class="search" type="search"></input>
        <label for="search-corpus">Search corpus</label>
      </div>
      <table>
        <thead>
          <tr>
            <th></th>
            <th>
              <span class="sort" data-sort="title">Title</span>
              <span class="sort" data-sort="description">Description</span>
            </th>
            <th><span class="sort" data-sort="status">Status</span></th>
            <th></th>
          </tr>
        </thead>
        <tbody class="list"></tbody>
      </table>
      <ul class="pagination"></ul>
    </div>
    <div class="card-action right-align">
      <a class="waves-effect waves-light btn" href="{{ url_for('corpora.add_corpus') }}">New corpus<i class="material-icons right">add</i></a>
    </div>
  </div>
</div>

<div class="col s12" id="jobs">
  <h3>My Jobs</h3>
  <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,</p>
  <div class="card">
    <div class="card-content">
      <div class="input-field">
        <i class="material-icons prefix">search</i>
        <input id="search-job" class="search" type="search"></input>
        <label for="search-job">Search job</label>
      </div>
      <table>
        <thead>
          <tr>
            <th><span class="sort" data-sort="service">Service</span></th>
            <th>
              <span class="sort" data-sort="title">Title</span>
              <span class="sort" data-sort="description">Description</span>
            </th>
            <th><span class="sort" data-sort="status">Status</span></th>
            <th></th>
          </tr>
        </thead>
        <tbody class="list"></tbody>
      </table>
      <ul class="pagination"></ul>
    </div>
    <div class="card-action right-align">
        <p><a class="modal-trigger waves-effect waves-light btn" href="#" data-target="new-job-modal"><i class="material-icons left">add</i>New job</a></p>
    </div>
  </div>
</div>

<div id="new-job-modal" class="modal">
  <div class="modal-content">
    <h4>Select a service</h4>
    <ul class="collection">
      <a href="{{ url_for('services.service', service='setup_files') }}" class="collection-item">
        <i class="material-icons left">burst_mode</i>Setup files
      </a>
      <a href="{{ url_for('services.service', service='nlp') }}" class="collection-item">
        <i class="material-icons left">format_textdirection_l_to_r</i>Natural Language Processing
      </a>
      <a href="{{ url_for('services.service', service='ocr') }}" class="collection-item">
        <i class="material-icons left">find_in_page</i>Optical Character Recognition
      </a>
    </ul>
  </div>
  <div class="modal-footer">
    <a href="#!" class="modal-close waves-effect waves-green btn-flat">Close</a>
  </div>
</div>

<script>
  var corpusList = new RessourceList("corpora", nopaque.corporaSubscribers,
                                     "corpus");
  var jobList = new RessourceList("jobs", nopaque.jobsSubscribers, "job");
</script>
{% endblock %}