{% extends "base.html.j2" %}
{% from "services/_breadcrumbs.html.j2" import breadcrumbs with context %}
{% import "materialize/wtf.html.j2" as wtf %}

{% block main_attribs %} class="service-scheme" data-service="file-setup"{% endblock main_attribs %}

{% block page_content %}
<div class="container">
  <div class="row">
    <div class="col s12">
      <h1 id="title">{{ title }}</h1>
    </div>

    <div class="col s12 m3 push-m9">
      <div class="center-align">
        <p class="hide-on-small-only">&nbsp;</p>
        <p class="hide-on-small-only">&nbsp;</p>
        <a class="btn-floating btn-large btn-scale-x2 waves-effect waves-light">
          <i class="nopaque-icons service-color darken service-icon" data-service="file-setup"></i>
        </a>
      </div>
    </div>

    <div class="col s12 m9 pull-m3">
      <div class="card service-color-border border-darken" data-service="file-setup" style="border-top: 10px solid;">
        <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">
      <h2>Submit a job</h2>
      <div class="card">
        <form class="nopaque-submit-form" data-progress-modal="progress-modal">
          <div class="card-content">
            {{ form.hidden_tag() }}
            <div class="row">
              <div class="col s12 l4">
                {{ wtf.render_field(form.title, data_length='32', material_icon='title') }}
              </div>
              <div class="col s12 l8">
                {{ wtf.render_field(form.description, data_length='255', material_icon='description') }}
              </div>
              <div class="col s12 l9">
                {{ wtf.render_field(form.files, accept='image/jpeg, image/png, image/tiff', placeholder='Choose your .jpeg, .png or .tiff files') }}
              </div>
              <div class="col s12 l3">
                {{ wtf.render_field(form.version, material_icon='apps') }}
              </div>
            </div>
          </div>
          <div class="card-action right-align">
            {{ wtf.render_field(form.submit, material_icon='send') }}
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
{% endblock page_content %}

{% block modals %}
{{ super() }}
<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 modals %}