{% extends "nopaque.html.j2" %}
{% import 'materialize/wtf.html.j2' as wtf %}
{% from '_colors.html.j2' import colors %}

{% set scheme_primary_color = colors.file_setup_darken %}
{% set scheme_secondary_color = colors.file_setup %}

{% block nav_content %}
{% include 'services/_breadcrumbs.html.j2' %}
{% endblock nav_content %}

{% block main_attribs %} class="file-setup-color lighten"{% 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 waves-effect waves-light" style="transform: scale(2);">
          <i class="material-icons service" data-service="file-setup"></i>
        </a>
      </div>
    </div>

    <div class="col s12 m9 pull-m3">
      <div class="card" style="border-top: 10px solid {{ colors.file_setup_darken }};">
        <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">
                {{ 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 hide">
                {{ 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>

<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 %}