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

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

    <div class="col s12" id="corpora">
      <h2>My Corpora</h2>
      <p>Create a corpus to interactively perform linguistic analysis.</p>
    </div>

    <div class="col s12">
      <div class="card">
        <div class="card-content">
          <div class="corpus-list" data-user-id="{{ current_user.hashid }}"></div>
        </div>
        <div class="card-action right-align">
          <a class="btn waves-effect waves-light" href="{{ url_for('corpora.create_corpus') }}">Create corpus<i class="material-icons right">add</i></a>
        </div>
      </div>
    </div>

    <div class="col s12" id="jobs">
      <h2>My Jobs</h2>
      <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. We
        <b>strongly recommend</b> that you create a folder on your computer where you
        save the various files that nopaque provides you with after each
        pre-processing step. You will need the result of each step for the
        next step.
      </p>
    </div>

    <div class="col s12">
      <div class="card">
        <div class="card-content">
          <div class="job-list" data-user-id="{{ current_user.hashid }}"></div>
        </div>
        <div class="card-action right-align">
          <p><a class="btn modal-trigger waves-effect waves-light" data-target="create-job-modal">Create job<i class="material-icons right">add</i></a></p>
        </div>
      </div>
    </div>

    <div class="col s12" id="contributions">
      <h2>My Contributions</h2>
    </div>

    <div class="col s4">
      <div class="card extension-selector hoverable service-color" data-service="tesseract-ocr-pipeline">
        <a href="{{ url_for('contributions.tesseract_ocr_pipeline_models') }}" style="position: absolute; width: 100%; height: 100%;"></a>
        <div class="card-content">
          <span class="card-title">Tesseract OCR Pipeline Models</span>
          <p>Here you can see and edit the models that you have created. You can also create new models.</p>
        </div>
      </div>
    </div>

    <div class="col s4">
      <div class="card extension-selector hoverable service-color" data-service="spacy-nlp-pipeline">
        <a href="{{ url_for('contributions.spacy_nlp_pipeline_models') }}" style="position: absolute; width: 100%; height: 100%;"></a>
        <div class="card-content">
          <span class="card-title">SpaCy NLP Pipeline Models</span>
          <p>Here you can see and edit the models that you have created. You can also create new models.</p>
        </div>
      </div>
    </div>

    {% if config.NOPAQUE_TRANSKRIBUS_ENABLED %}
    <div class="col s4">
      <div class="card extension-selector hoverable service-color" data-service="transkribus-htr-pipeline">
      <a href="{{ url_for('contributions.transkribus_htr_pipeline_models') }}" style="position: absolute; width: 100%; height: 100%;"></a>
        <div class="card-content">
          <span class="card-title">Transkribus HTR Pipeline Models</span>
          <p>Here you can see and edit the models that you have created. You can also create new models.</p>
        </div>
      </div>
    </div>
    {% endif %}
  </div>
</div>
{% endblock page_content %}

{% block modals %}
{{ super() }}
<div id="create-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.file_setup_pipeline') }}" class="btn-floating btn-large waves-effect waves-light" style="transform: scale(2);">
              <i class="nopaque-icons service-color darken service-icons" data-service="file-setup-pipeline"></i>
            </a>
            <br><br>
            <p class="service-color-text darken" data-service="file-setup-pipeline"><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.file_setup_pipeline') }}" class="waves-effect waves-light btn service-color darken" data-service="file-setup-pipeline">Create Job</a>
          </div>
      </div>
      <div class="col s12 m4">
          <div class="card-panel center-align hoverable">
            <br>
            <a href="{{ url_for('services.tesseract_ocr_pipeline') }}" class="btn-floating btn-large waves-effect waves-light" style="transform: scale(2);">
              <i class="nopaque-icons service-color darken service-icons" data-service="tesseract-ocr-pipeline" style="font-size: 2.5rem;"></i>
            </a>
            <br><br>
            <p class="service-color-text darken" data-service="tesseract-ocr-pipeline"><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.tesseract_ocr_pipeline') }}" class="waves-effect waves-light btn service-color darken" data-service="tesseract-ocr-pipeline">Create Job</a>
          </div>
      </div>
      <div class="col s12 m4">
          <div class="card-panel center-align hoverable">
            <br>
            <a href="{{ url_for('services.spacy_nlp_pipeline') }}" class="btn-floating btn-large waves-effect waves-light" style="transform: scale(2);">
              <i class="nopaque-icons service-color darken service-icons" data-service="spacy-nlp-pipeline" style="font-size: 2.5rem;"></i>
            </a>
            <br><br>
            <p class="service-color-text darken" data-service="spacy-nlp-pipeline"><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.spacy_nlp_pipeline') }}" class="waves-effect waves-light btn service-color darken" data-service="spacy-nlp-pipeline">Create Job</a>
          </div>
      </div>
    </div>
  </div>
  <div class="modal-footer">
    <a class="btn-flat modal-close waves-effect waves-light">Close</a>
  </div>
</div>
{% endblock modals %}