{% extends "scanpipe/base.html" %}

{% block content %}
  <div class="container is-max-widescreen">
    {% include 'scanpipe/includes/navbar_header.html' %}

    <section class="mx-5 pt-0 pb-1">
      <h2 class="subtitle mb-0 mb-4">
        Create a <strong>Project</strong>
      </h2>

      {% include 'scanpipe/includes/form_errors.html' %}

      <div class="columns">
        <div class="column is-7 pr-5 pb-0">

          <form method="post" action="{% url 'project_add' %}" enctype="multipart/form-data">{% csrf_token %}
            <div class="field">
              <label class="label" for="{{ form.name.id_for_label }}">{{ form.name.label }}</label>
              <div class="control">
                {{ form.name }}
                <p class="help">{{ form.name.help_text }}</p>
              </div>
            </div>

            <label class="label mt-5">Inputs</label>
            <div class="box">
              <label class="label has-text-weight-semibold" for="{{ form.input_files.id_for_label }}">Upload files</label>
              <div class="file has-name is-boxed is-fullwidth" id="input_files_box">
                <label class="file-label">
                  {{ form.input_files }}
                  <span class="file-cta">
                    <span class="file-icon">
                      <i class="fa-solid fa-upload"></i>
                    </span>
                    <span class="file-label has-text-centered">
                      Drop files over here (or click)
                    </span>
                  </span>
                  <span class="file-name is-height-auto" id="inputs_file_name">
                    <i>No files selected</i>
                  </span>
                </label>
              </div>

              <div class="field mt-5">
                <label class="label has-text-weight-semibold" for="{{ form.input_urls.id_for_label }}">{{ form.input_urls.label }}</label>
                <div class="control">
                  {{ form.input_urls }}
                  <p class="help">{{ form.input_urls.help_text }}</p>
                </div>
              </div>
            </div>

            <div class="field mt-5">
              <label class="label" for="{{ form.pipeline.id_for_label }}">Pipeline</label>
              <div class="control">
                <span class="select">
                  {{ form.pipeline }}
                </span>
              </div>
            </div>

            <div class="field">
              <label class="checkbox" for="{{ form.execute_now.id_for_label }}">
                {{ form.execute_now }}
                {{ form.execute_now.label }}
              </label>
            </div>

            <div class="columns mt-4 is-variable is-1">
              <div class="column is-one-third">
                <a href="{% url 'project_list' %}" class="button is-fullwidth">Cancel</a>
              </div>
              <div class="column">
                <input type="submit" class="button is-fullwidth is-link" value="Create">
              </div>
            </div>
          </form>
          {{ form.media }}
        </div>

        <div class="column has-background-light has-border-radius">
          <h3 class="subtitle mb-3">Pipelines:</h3>
          {% for pipeline_name, pipeline_info in pipelines.items %}
            <div class="mb-3">
              <div>
                <a class="help-text modal-button" data-target="{{ pipeline_name }}-modal" aria-haspopup="true">
                  <strong>{{ pipeline_name }}</strong>
                </a>
                <div id="{{ pipeline_name }}-modal" class="modal">
                  <div class="modal-background"></div>
                  <div class="modal-card">
                    <header class="modal-card-head">
                      <p class="modal-card-title">
                        <strong>{{ pipeline_name }}</strong>
                      </p>
                      <button class="delete" aria-label="close"></button>
                    </header>
                    <div class="notification has-background-info-light has-text-weight-semibold is-radiusless mb-0">
                      <p>{{ pipeline_info.summary }}</p>
                      {% if pipeline_info.description %}
                        <p class="mt-3">{{ pipeline_info.description|linebreaks }}</p>
                      {% endif %}
                    </div>
                    <section class="modal-card-body has-text-centered border-bottom-radius">
                      {% for step in pipeline_info.steps %}
                        <span class="tag is-info">{{ step.name }}</span>
                        <div>{{ step.doc }}</div>
                        {% if not forloop.last %}<div>&darr;</div>{% endif %}
                      {% endfor %}
                    </section>
                  </div>
                </div>
              </div>
              {{ pipeline_info.summary }}
            </div>
          {% endfor %}
        </div>
      </div>
    </section>
  </div>
{% endblock %}

{% block scripts %}
  <script>
    let form = document.querySelector('form');

    form.addEventListener('submit', function(event) {
      let background = displayOverlay();

      // The upload progress is only added when input files are provided.
      if (!form["input_files"].files.length) return false;

      event.preventDefault();

      let progress_bar = document.createElement('progress');
      progress_bar.className = 'progress is-success is-medium file-upload';
      progress_bar.setAttribute('value', '0');
      progress_bar.setAttribute('max', '100');

      let progress_container = document.createElement('div');
      progress_container.className = 'container is-max-desktop mt-6 px-6';
      progress_container.appendChild(progress_bar)
      background.appendChild(progress_container);

      let form_errors = document.getElementById('form-errors');
      displayFormUploadProgress(form, progress_bar, form_errors, true);
    });
  </script>
{% endblock %}