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

{% set headline = '<i class="material-icons left service" data-service="setup_files" style="font-size: inherit;"></i>File setup' %}

{% block page_content %}
<div class="col s12 m9 l10">
  <div class="card">
    <div class="card-content">
      <div class="row">
        <div class="col s12">
          <div class="card-panel z-depth-0">
            <span class="card-title"><i class="left material-icons">layers</i>Merge process</span>
            <p>nopaque converts and merges your files in its cloud infrastructure to facilitate further processing and the application of other services. You only have to number your files in the correct order to receive a multi-page TIFF file.</p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <h3>Submit a job</h3>
  <div class="card">
    <form class="nopaque-job-form" data-progress-modal="progress-modal">
      <div class="card-content">
        {{ add_job_form.hidden_tag() }}
        <div class="row">
          <div class="col s12 l4">
            <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 l8">
            <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">
        {{ macros.submit_button(add_job_form.submit) }}
      </div>
    </form>
  </div>
</div>

<div class="col hide-on-small-only m3 l2">
  {% include 'services/roadmap.html.j2' %}
</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>
  </div>
  <div class="modal-footer">
    <a href="#!" class="modal-close waves-effect waves-light btn red abort-request">Cancel</a>
  </div>
</div>
{% endblock %}