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

{% block page_content %}
<div class="col s12 m4">
  <h3>The process...</h3>
  <p>Der hier zur Verfügung gestellte Dienst basiert auf dem Verfahren der optischen Zeichenerkennung. Dabei werden durch optische Analysemethoden und einen anschließenden Abgleich mit Wörterbüchern aus Bilddaten, wie Fotos oder Scans, Textdaten erzeugt. Erst dieser Vorverarbeitungsschritt ermöglicht eine computergestützte Verarbeitung von Dokumenten.</p>
  <p>Die Ausgabe dieses Dienstes erfolgt in Form von Textdateien, PDF Dateien mit hinterlegtem Text und <a href="https://tei-c.org/guidelines/p5/" target="_blank">TEI P5</a> konformen XML Dateien.</p>
</div>

<div class="col s12 m8">
  <div class="card">
    <div class="card-content">
      <div class="row">
        <div class="col s12 m6">
          <div class="card z-depth-0">
            <div class="card-content">
              <span class="card-title"><i class="material-icons blue-grey-text text-darken-2 left">layers</i>Eingabe von Bilddaten</span>
              <p>Über ein Auftragsformular können Bilddaten in Form von PDF-Dateien hochgeladen werden.</p>
            </div>
          </div>
        </div>
        <div class="col s12 m6">
          <div class="card z-depth-0">
            <div class="card-content">
              <span class="card-title"><i class="material-icons blue-grey-text text-darken-2 left">layers</i>Optische Zeichenerkennung</span>
              <p>Die optische Zeichenerkennung erfolgt in der Recheninfrastruktur der Plattform.</p>
            </div>
          </div>
        </div>
        <div class="col s12 m6">
          <div class="card z-depth-0">
            <div class="card-content">
              <span class="card-title"><i class="material-icons blue-grey-text text-darken-2 left">layers</i>Fehlerkorrektur</span>
              <p>Je nach Qualität der Eingabedaten kann es zu Fehlern kommen, die korrigiert werden sollten.</p>
            </div>
          </div>
        </div>
        <div class="col s12 m6">
          <div class="card z-depth-0">
            <div class="card-content">
              <span class="card-title"><i class="material-icons blue-grey-text text-darken-2 left">layers</i>Weiterverarbeitung</span>
              <p>Die Textdaten können weiterverarbeitet<a class="tooltipped" data-position="top" data-tooltip="Zum Beispiel durch die hier angebotene linguistische Datenverarbeitung."><sup>[*]</sup></a> oder in dieser Form bereits genutzt<a class="tooltipped" data-position="top" data-tooltip="Zum Beispiel mit dem Programm &quot;AntConc&quot;."><sup>[*]</sup></a> werden.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="col s12">
  <h3>Submit a job</h3>
</div>

<div class="col s12">
  <div class="card">
    <form method="POST" enctype="multipart/form-data" id="new-ocr-job-form">
      <div class="card-content">
        {{ new_ocr_job_form.hidden_tag() }}
        <div class="row">
          <div class="col s12 m4">
            <div class="input-field">
              <i class="material-icons prefix">title</i>
              {{ new_ocr_job_form.title(data_length='32') }}
              {{ new_ocr_job_form.title.label }}
              {% for error in new_ocr_job_form.title.errors %}
                <span class="helper-text red-text">{{ error }}</span>
              {% endfor %}
            </div>
          </div>
          <div class="col s12 m8">
            <div class="input-field">
              <i class="material-icons prefix">description</i>
              {{ new_ocr_job_form.description(data_length='255') }}
              {{ new_ocr_job_form.description.label }}
              {% for error in new_ocr_job_form.description.errors %}
                <span class="helper-text red-text">{{ error }}</span>
              {% endfor %}
            </div>
          </div>
          <div class="col s12 m5">
            <div class="file-field input-field">
              <div class="btn">
                <span>{{ new_ocr_job_form.files.label.text }}</span>
                {{ new_ocr_job_form.files(accept='application/pdf, image/tiff') }}
              </div>
              <div class="file-path-wrapper">
                <input class="file-path validate" type="text">
              </div>
              {% for error in new_ocr_job_form.files.errors %}
                <span class="helper-text red-text">{{ error }}</span>
              {% endfor %}
            </div>
          </div>
          <div class="col s12 m4">
            <div class="input-field">
              <i class="material-icons prefix">language</i>
              {{ new_ocr_job_form.language() }}
              {{ new_ocr_job_form.language.label }}
              {% for error in new_ocr_job_form.language.errors %}
                <span class="helper-text red-text">{{ error }}</span>
              {% endfor %}
            </div>
          </div>
          <div class="col s12 m3">
            <div class="input-field">
              <i class="material-icons prefix">apps</i>
              {{ new_ocr_job_form.version() }}
              {{ new_ocr_job_form.version.label }}
              {% for error in new_ocr_job_form.version.errors %}
                <span class="helper-text red-text">{{ error }}</span>
              {% endfor %}
            </div>
          </div>
          <div class="col s12"></div>
          <div class="col s8 m3">
            <span class="card-title">Binarization</span>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempora invidunt ut</p>
          </div>
          <div class="col s4 m1">
            <div class="switch">
              <label>
                {{ new_ocr_job_form.binarization() }}
                <span class="lever"></span>
              </label>
            </div>
          </div>
          <div class="col s8 m3" style="border-left: 1px solid #e0e0e0;">
            <span class="card-title">Page split (N.a.)</span>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempora invidunt ut</p>
          </div>
          <div class="col s4 m1">
            <div class="switch">
              <label>
                <input type="checkbox" disabled>
                <span class="lever"></span>
              </label>
            </div>
          </div>
          <div class="col s8 m3" style="border-left: 1px solid #e0e0e0;">
            <span class="card-title">Page rotation (N.a.)</span>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempora invidunt ut</p>
          </div>
          <div class="col s4 m1">
            <div class="switch">
              <label>
                <input type="checkbox" disabled>
                <span class="lever"></span>
              </label>
            </div>
          </div>
        </div>
      </div>
      <div class="card-action right-align">
        {{ new_ocr_job_form.submit(class='btn') }}
      </div>
    </form>
  </div>
</div>

<div id="progress-modal" class="modal">
  <div class="modal-content">
    <h4><i class="material-icons prefix">file_upload</i> Uploading files for <span class="title"></span></h4>
    <div class="progress">
      <div class="determinate" style="width: 0%"></div>
    </div>
    <p><span class="progress-in-percent"></span> uploaded</p>
  </div>
  <div class="modal-footer">
    <a href="#!" class="modal-close waves-effect waves-green btn red cancel">Cancel</a>
  </div>
</div>

<script>
  initNewJobForm(document.getElementById("new-ocr-job-form"),
                 document.getElementById("progress-modal"));
</script>
{% endblock %}