nopaque/app/templates/services/file-setup.html.j2

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

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

{% block page_content %}
<div class="col s12 m3 push-m9">
  {% include 'services/roadmap.html.j2' %}
</div>

<div class="col s12 m9 pull-m3">
  <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 PDF file.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="col s12">
  <h3>Submit a job</h3>
  <div class="card">
    <form class="nopaque-submit-form" data-progress-modal="progress-modal">
      <div class="card-content">
        {{ add_job_form.hidden_tag() }}
        <div class="row">
          <div class="col s12 l4">
            {{ M.render_field(add_job_form.title, data_length='32', material_icon='title') }}
          </div>
          <div class="col s12 l8">
            {{ M.render_field(add_job_form.description, data_length='255', material_icon='description') }}
          </div>
          <div class="col s12">
            {{ M.render_field(add_job_form.files, accept='image/jpeg, image/png, image/tiff') }}
          </div>
          <div class="col s12 hide">
            {{ M.render_field(add_job_form.version, material_icon='apps') }}
          </div>
        </div>
      </div>
      <div class="card-action right-align">
        {{ M.render_field(add_job_form.submit, material_icon='send') }}
      </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...</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 %}