{% extends "layout.html" %}

{% block navigation %}

<ul class="nav navbar-nav mr-auto">
    <li class="nav-item">
        <a href="{{ url_for('web_experiments.new_experiment') }}" class="nav-link">
            <i class="fas fa-globe mr-2"></i>Web Experiment (current)</a>
    </li>
    <li class="nav-item nav-link">|</li>
    <li class="nav-item"><a href="{{ url_for('local_experiments.new_local_experiment') }}" class="nav-link"><i
                class="fas fa-dot-circle mr-2"></i>Local Experiment</a></li>
</ul>

{% endblock %}

{% block content %}

<div class="content-section">
    <form method="POST" enctype="multipart/form-data" action="{{ url_for('web_experiments.new_experiment') }}"
        class="needs-validation" novalidate>
        {{ form.hidden_tag() }}
        <fieldset class="form-group">
            <legend class="border-bottom mb-4">{{ legend }}</legend>

            <div class="form-group">
                {{ form.title.label(class="form-control-label") }}*
                {% if form.title.errors %}
                {{ form.title(class="form-control form-control-lg is-invalid") }}

                <div class="invalid-feedback">
                    {% for error in form.title.errors %}
                    <span>{{ error }}</span>
                    {% endfor %}
                </div>

                {% else %}
                {{ form.title(class="form-control form-control-lg") }}
                {% endif %}
            </div>

            <div class="form-group">
                {{ form.version.label(class="form-control-label") }}*
                {% if form.version.errors %}
                {{ form.version(class="form-control form-control-lg is-invalid") }}
                <!-- , placeholder=form.version.label.text -->

                <div class="invalid-feedback">
                    {% for error in form.version.errors %}
                    <span>{{ error }}</span>
                    {% endfor %}
                </div>

                {% else %}
                {{ form.version(class="form-control form-control-lg") }}
                {% endif %}
            </div>


            <div class="form-group">
                {{ form.description.label(class="form-control-label") }}
                {% if form.description.errors %}
                {{ form.description(class="form-control form-control-lg is-invalid") }}

                <div class="invalid-feedback">
                    {% for error in form.description.errors %}
                    <span>{{ error }}</span>
                    {% endfor %}
                </div>

                {% else %}
                {{ form.description(class="form-control form-control-lg") }}
                {% endif %}
            </div>


            <div class="form-group pt-1">
                {{ form.password.label(class="form-control-label") }}
                {% if form.password.errors %}
                {{ form.password(class="form-control form-control-lg is-invalid") }}

                <div class="invalid-feedback">
                    {% for error in form.password.errors %}
                    <span>{{ error }}</span>
                    {% endfor %}
                </div>

                {% else %}
                {{ form.password(class="form-control form-control-lg") }}
                {% endif %}
                <small id="passwordHelpBlock" class="form-text text-muted">
                    Here, you can protect access to your experiment with a password. Just leave this field empty if you
                    want the experiment to be public.
                </small>
            </div>

            <div class="form-group">
                {{ form.script.label() }}
                {{ form.script(class="form-control-file") }}
                {% if form.script.errors %}
                {% for error in form.script.errors %}
                <span class="text-danger">{{ error }}</span><br>
                {% endfor %}
                {% endif %}
            </div>

        </fieldset>

        <div class="form-group">
            {{ form.submit(class="btn btn-outline-primary", id="submit")}}
        </div>
    </form>
</div>

{% endblock content %}