{% extends "base.html" %}
{% block main %}
<div id="mainworkflow">

  <div id="upload" class="workflow">
    <h3>Step 1: Upload</h3>
    <p>Upload your files here, the only accepted file type is a zip file</p>
    <form method="POST" enctype="multipart/form-data" action="{{ url_for('upload') }}">
      {{ uploadform.csrf_token }}
      <fieldset class="required">
        {{ uploadform.sitename.label }}
        {{ uploadform.sitename }}
        {% for message in uploadform.sitename.errors %}
        <div class="error">{{ message }}</div>
        {% endfor %}
      </fieldset>
      <fieldset class="required">
        {{ uploadform.zipfile.label }}
        {{ uploadform.zipfile }}
        {% for message in uploadform.zipfile.errors %}
        <div class="error">{{ message }}</div>
        {% endfor %}
      </fieldset>
      <fieldset class="button required">
        {{ uploadform.submit }}
      </fieldset>
    </form>
    {% if success %}
    <p>Your file has been uploaded successfully</h2>
      {% endif %}
  </div>
  <img src="{{ url_for('static', filename='svg/arrow_1.svg')}}" />
  <div id="theme" class="workflow">
      <h3>(Optional) Step 2: Theme</h3>
      <p>Select your Theme here. If you want your own custom css, skip and go to
        step 3. Don't forget to press Save</p>
      <form method="POST" enctype="multipart/form-data" action="{{ url_for('theme') }}">
        {{ themeform.csrf_token }}
        <fieldset class="required">
          {{ themeform.theme.label }}
          {{ themeform.theme }}
        </fieldset>
        <fieldset class="button required">
          {{ themeform.save }}
        </fieldset>
      </form>
    </div>
    <img src="{{ url_for('static', filename='svg/arrow_2.svg')}}" />
    <div id="edit" class="workflow">
      <h3>(Optional) Step 3: Edit</h3>
      <a href="/editor"><p>Go to CSS editor</p></a>
  </div>
  <img src="{{ url_for('static', filename='svg/arrow_3.svg')}}" />
  <div id="distribusi" class="workflow">
      <h3>Step 4: Distribusi</h3>
      <p>run distribusi on your files, this will generate your website and make
        your content public.</p>
        <form method="POST" enctype="multipart/form-data" action="{{ url_for('distribusi') }}">
          {{ distribusiform.csrf_token }}
          <fieldset class="button required">
            {{ distribusiform.submit }}
          </fieldset>
        </form>
    </div>
</div>
{% endblock main %}