{% extends "base.html.j2" %}
{% from "main/_breadcrumbs.html.j2" import breadcrumbs with context %}

{% block page_content %}
<div class="container">
  <div class="row">
    <div class="col s12">
      <h1 id="title">{{ title }}</h1>
    </div>

    <div class="col s12">
      <h3>My Corpora and Query results</h3>
      <p>Create a corpus to interactively perform linguistic analysis or import query results to save interesting passages.</p>
      <div class="row">
        <div class="col s12">
          <ul class="tabs">
            <li class="tab col s6"><a class="active" href="#corpora">Corpora</a></li>
            <li class="tab col s6"><a href="#query-results">Query results</a></li>
          </ul>
        </div>
        <div class="col s12 nopaque-ressource-list" data-ressource-type="Corpus" data-user-id="{{ current_user.hashid }}" id="corpora">
          <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>Title and Description</th>
                    <th>Status</th>
                    <th></th>
                  </tr>
                </thead>
                <tbody class="list"></tbody>
              </table>
              <ul class="pagination"></ul>
            </div>
            <div class="card-action right-align">
              <a class="btn disabled waves-effect waves-light" href="{{ url_for('corpora.import_corpus') }}"><i class="material-icons right">import_export</i>Import Corpus</a>
              <a class="btn waves-effect waves-light" href="{{ url_for('corpora.add_corpus') }}">New corpus<i class="material-icons right">add</i></a>
            </div>
          </div>
        </div>
        <div class="col s12 nopaque-ressource-list" data-ressource-type="QueryResult" data-user-id="{{ current_user.hashid }}" id="query-results">
          <div class="card">
            <div class="card-content">
              <div class="input-field">
                <i class="material-icons prefix">search</i>
                <input id="search-query-results" class="search" type="search"></input>
                <label for="search-query-results">Search query result</label>
              </div>
              <table>
                <thead>
                  <tr>
                    <th>Title and Description</th>
                    <th>Corpus and Query</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 disabled">Add query result<i class="material-icons right">file_upload</i></a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="col s12 nopaque-ressource-list" data-ressource-type="Job" data-user-id="{{ current_user.hashid }}" id="jobs">
      <h3>My Jobs</h3>
      <p>A job is the execution of a service provided by nopaque. You can create any number of jobs and let them be processed simultaneously.</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>Service</th>
                <th>Title and Description</th>
                <th>Status</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>
</div>
{% endblock page_content %}

{% block modals %}
{{ super() }}
<div id="new-job-modal" class="modal">
  <div class="modal-content">
    <h4>Select a service</h4>
    <p>&nbsp;</p>
    <div class="row">
      <div class="col s12 m4">
          <div class="card-panel center-align hoverable">
            <br>
            <a href="{{ url_for('services.service', service='file-setup') }}" class="btn-floating btn-large waves-effect waves-light" style="transform: scale(2);">
              <i class="nopaque-icon nopaque-service-color darken nopaque-service-icon" data-service="file-setup"></i>
            </a>
            <br><br>
            <p class="nopaque-service-color-text darken" data-service="file-setup"><b>File setup</b></p>
            <p class="light">Digital copies of text based research data (books, letters, etc.) often comprise various files and formats. nopaque converts and merges those files to facilitate further processing.</p>
            <a href="{{ url_for('services.service', service='file-setup') }}" class="waves-effect waves-light btn nopaque-service-color darken" data-service="file-setup">Create Job</a>
          </div>
      </div>
      <div class="col s12 m4">
          <div class="card-panel center-align hoverable">
            <br>
            <a href="{{ url_for('services.service', service='tesseract-ocr') }}" class="btn-floating btn-large waves-effect waves-light" style="transform: scale(2);">
              <i class="nopaque-icon nopaque-service-color darken nopaque-service-icon" data-service="tesseract-ocr" style="font-size: 2.5rem;"></i>
            </a>
            <br><br>
            <p class="nopaque-service-color-text darken" data-service="tesseract-ocr"><b>Optical Character Recognition</b></p>
            <p class="light">nopaque converts your image data – like photos or scans – into text data through a process called OCR. This step enables you to proceed with further computational analysis of your documents.</p>
            <a href="{{ url_for('services.service', service='tesseract-ocr') }}" class="waves-effect waves-light btn nopaque-service-color darken" data-service="tesseract-ocr">Create Job</a>
          </div>
      </div>
      <div class="col s12 m4">
          <div class="card-panel center-align hoverable">
            <br>
            <a href="{{ url_for('services.service', service='spacy-nlp') }}" class="btn-floating btn-large waves-effect waves-light" style="transform: scale(2);">
              <i class="nopaque-icon nopaque-service-color darken nopaque-service-icon" data-service="spacy-nlp" style="font-size: 2.5rem;"></i>
            </a>
            <br><br>
            <p class="nopaque-service-color-text darken" data-service="spacy-nlp"><b>Natural Language Processing</b></p>
            <p class="light">By means of computational linguistic data processing (tokenization, lemmatization, part-of-speech tagging and named-entity recognition) nopaque extracts additional information from your text.</p>
            <a href="{{ url_for('services.service', service='spacy-nlp') }}" class="waves-effect waves-light btn nopaque-service-color darken" data-service="spacy-nlp">Create Job</a>
          </div>
      </div>
    </div>
  </div>
  <div class="modal-footer">
    <a href="#!" class="modal-close waves-effect waves-light btn-flat">Close</a>
  </div>
</div>
{% endblock modals %}