{% extends "base.html.j2" %}
{% import "wtf.html.j2" as wtf %}

{% block main_attributes %}class="service-color lighten" data-service="file-setup-pipeline"{% endblock main_attributes %}

{% 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>
        <i class="large nopaque-icons service-icons service-color-text text-darken"></i>
      </div>
    </div>

    <div class="col s12 m9 pull-m3">
      <div class="card service-color-border border-darken" 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="create-job-form" enctype="multipart/form-data" method="POST">
          <div class="card-content">
            {{ form.hidden_tag() }}
            <div class="row">
              <div class="col s12 l4">
                {{ wtf.render_field(form.title, material_icon='title') }}
              </div>
              <div class="col s12 l8">
                {{ wtf.render_field(form.description, material_icon='description') }}
              </div>
              <div class="col s12 l9">
                {{ wtf.render_field(form.images, accept='image/jpeg, image/png, image/tiff', placeholder='Choose 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 scripts %}
{{ super() }}
<script>
  function initPage() {
    let createJobFormImagesElement = document.querySelector('#{{ form.images.id }}');
    createJobFormImagesElement.parentElement.classList.add('service-color', 'darken');

    let createJobFormSubmitElement = document.querySelector('#{{ form.submit.id }}');
    createJobFormSubmitElement.classList.add('service-color', 'darken');
  };

  initPage();
</script>
{% endblock scripts %}