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

{% block page_content %}
<div class="col s12 m4">
  <h3>Description</h3>
  <p>To use the <a href="{{ url_for('services.service', service='ocr') }}">OCR</a> service offered here, the input data provided for this purpose must be available either as PDF or multipage TIFF files. However, image files are usually only available as PNG, JPEG or singlepage TIFF files. This service converts the uploaded image files into the correct file format for the <a href="{{ url_for('services.service', service='ocr') }}">OCR</a> service.</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>Image upload</span>
              <p>Upload your image files in PNG, JPEG oder singlepage TIFF file format with the provided formular.</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>Merge process</span>
              <p>The cloud infrastructure picks up your data and merges it into a multipage TIFF file.</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="add-job-form">
      <div class="card-content">
        {{ add_job_form.hidden_tag() }}
        <div class="row">
          <div class="col s12 m4">
            <div class="input-field">
              <i class="material-icons prefix">title</i>
              {{ add_job_form.title(data_length='32') }}
              {{ add_job_form.title.label }}
              {% for error in add_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>
              {{ add_job_form.description(data_length='255') }}
              {{ add_job_form.description.label }}
              {% for error in add_job_form.description.errors %}
                <span class="helper-text red-text">{{ error }}</span>
              {% endfor %}
            </div>
          </div>
          <div class="col s12">
            <div class="file-field input-field">
              <div class="btn">
                <span>{{ add_job_form.files.label.text }}</span>
                {{ add_job_form.files(accept='image/jpeg, image/png, image/tiff') }}
              </div>
              <div class="file-path-wrapper">
                <input class="file-path validate" type="text">
              </div>
              {% for error in add_job_form.files.errors %}
                <span class="helper-text red-text">{{ error }}</span>
              {% endfor %}
            </div>
          </div>
          <div class="col s12 hide">
            <div class="input-field">
              <i class="material-icons prefix">apps</i>
              {{ add_job_form.version() }}
              {{ add_job_form.version.label }}
              {% for error in add_job_form.version.errors %}
                <span class="helper-text red-text">{{ error }}</span>
              {% endfor %}
            </div>
          </div>
        </div>
      </div>
      <div class="card-action right-align">
        <button class="btn waves-effect waves-light" id="submit" name="submit" type="submit">Submit<i class="material-icons right">send</i></button>
      </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>
  initAddJobForm(document.getElementById("add-job-form"),
                 document.getElementById("progress-modal"));
</script>
{% endblock %}