{% extends "base.html" %}
{% load static %}

{% block head %}
{% include 'head_content.html' with title="LyProX · Upload Dataset" %}
{% endblock head %}

{% block content %}

<section class="section">
  <div class="container">
    <div class="block columns is-centered">
      <div class="column is-6">
        <div class="box">
          <form action="{% url 'patients:dataset_upload' %}" method="post" enctype="multipart/form-data">
            {% csrf_token %}
            <div class="block">
              <p class="title is-3">Upload Dataset</p>
              <p class="block mb-2">
                Upload a CSV table of patients by specifiying a GitHub repository URL,
                a revision (branch or tag) and a path to the CSV file.
              </p>
              <p class="notification is-warning is-light">
                <span class="icon-text">
                  <span class="icon">
                    <i class="far fa-clock"></i>
                  </span>
                  <span>
                    Note that the import may take a few minutes to complete.
                  </span>
                </span>
              </p>
              {% if form.non_field_errors %}
              <p class="notification is-danger is-light">
                {{ form.non_field_errors }}
              </p>
              {% endif %}

              {% if error %}
              <p class="notification is-danger is-light">
                {{ error }}
              </p>
              {% endif %}
            </div>

            <div class="block">
              <div class="field">
                <div class="control is-expanded">
                  <label for="{{ form.git_repo_url.id_for_label }}" class="label">
                    {{ form.git_repo_url.label }}
                  </label>
                  {{ form.git_repo_url }}
                  {% if form.errors.git_repo_url %}
                  <small class="help is-danger">{{ form.errors.git_repo_url }}</small>
                  {% endif %}
                </div>
              </div>
              <div class="field is-grouped">
                <div class="control">
                  <label for="{{ form.revision.id_for_label }}" class="label">
                    {{ form.revision.label }}
                  </label>
                  {{ form.revision }}
                  {% if form.errors.revision %}
                  <small class="help is-danger">{{ form.errors.revision }}</small>
                  {% endif %}
                </div>
                <div class="control is-expanded">
                  <label for="{{ form.data_path.id_for_label }}" class="label">
                    {{ form.data_path.label }}
                  </label>
                  {{ form.data_path }}
                  {% if form.errors.data_path %}
                  <small class="help is-danger">{{ form.errors.data_path }}</small>
                  {% endif %}
                </div>
              </div>
            </div>

            <div class="level">
              <div class="level-left">
              </div>
              <div class="level-right">
                <div class="level-item">
                  <div class="field">
                    <button class="button is-primary" type="submit">
                      <span class="icon">
                        <i class="fas fa-cloud-upload-alt"></i>
                      </span>
                      <span>Upload</span>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>

{% block "js" %}
<script src="{% static 'patients/dataset_form.js' %}"></script>
{% endblock "js" %}

{% endblock content %}