{% 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_job_form.hidden_tag() }}
        <div class="row">
          <div class="col s12 m4">
            <div class="input-field">
              <i class="material-icons prefix">title</i>
              {{ new_job_form.title(data_length='32') }}
              {{ new_job_form.title.label }}
              {% for error in new_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_job_form.description(data_length='255') }}
              {{ new_job_form.description.label }}
              {% for error in new_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_job_form.files.label.text }}</span>
                {{ new_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_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_job_form.language() }}
              {{ new_job_form.language.label }}
              {% for error in new_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_job_form.version() }}
              {{ new_job_form.version.label }}
              {% for error in new_job_form.version.errors %}
                <span class="helper-text red-text">{{ error }}</span>
              {% endfor %}
            </div>
          </div>
          <div class="col s12"><p>&nbsp;</div>
          <div class="col s12 m4">
            <div class="row">
              <div class="col s9">
                <span class="card-title">Page range (N.a.)</span>
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempora invidunt ut</p>
                <div class="row valign-wrapper">
                  <div class="col s5">
                    <div class="input-field">
                      <input id="first-page" type="text" class="validate" value="0">
                      <label for="first-page">From start</label>
                    </div>
                  </div>
                  <div class="col s2">
                    <p>&ndash;</p>
                  </div>
                  <div class="col s5">
                    <div class="input-field">
                      <input id="last-page" type="text" class="validate" value="0">
                      <label for="last-page">Before end</label>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col s3">
                <div class="switch">
                  <label>
                    <input type="checkbox" disabled>
                    <span class="lever"></span>
                  </label>
                </div>
              </div>
            </div>
          </div>
          <div class="col s12 m4">
            <div class="row">
              <div class="col s9">
                <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>
                <p class="range-field">
                  <input type="range" id="page-split" min="30" max="70" value="0">
                </p>
              </div>
              <div class="col s3">
                <div class="switch">
                  <label>
                    <input type="checkbox" disabled>
                    <span class="lever"></span>
                  </label>
                </div>
              </div>
            </div>
          </div>
          <div class="col s12 m4">
            <div class="row">
              <div class="col s9">
                <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>
                <p class="range-field">
                  <input type="range" id="page-split" min="0" max="360" value="0">
                </p>
              </div>
              <div class="col s3">
                <div class="switch">
                  <label>
                    <input type="checkbox" disabled>
                    <span class="lever"></span>
                  </label>
                </div>
              </div>
            </div>
          </div>
          <div class="col s12"></div>
          <div class="col s12 m4">
            <div class="row">
              <div class="col s9">
                <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 s3">
                <div class="switch">
                  <label>
                    {{ new_job_form.binarization() }}
                    <span class="lever"></span>
                  </label>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="card-action right-align">
        {{ new_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 %}