{% extends 'base.html' %}
{% block content %}
    <div class="jumbotron">
        <h1>How to use it</h1>

        <p class="lead">
            Use the <a href="http://jmeter.apache.org">JMeter GUI</a> to create a scenario. Notice that your scenario must
            have an <b>
            <a href="http://jmeter.apache.org/usermanual/component_reference.html#Aggregate_Report">
                Aggregate Report Listener
            </a></b> registered.<br /><br />
            Then upload your JMeter script in the form below and specify how many virtual users (VU) do you want per second.
        </p>

    </div>
    <form action="{{ url_prefix }}/upload" method="post" name="upload-form" {% if form.is_multipart %} enctype="multipart/form-data" {% endif %} >
    {% csrf_token %}
    <div class="row marketing">
        {% if errors %}
            {% for message in messages %}
                {% if 'error' in message.tags %}
                    <div class="alert alert-danger">
                        <a class="close" href="#" data-dismiss="alert">×</a>
                        {{ message }}
                    </div>
                {% endif %}
            {% endfor %}
        {% else %}
            {% for message in messages %}
                {% if 'success' in message.tags %}
                    <div class="alert alert-success">
                        <a class="close" href="#" data-dismiss="alert">×</a>
                        {{ message|safe }}
                    </div>
                {% endif %}
            {% endfor %}
        {% endif %}


            <div class="form-group form-scenario-upload">
                <label>Scenario</label>
                <input type="file" id="scenarioUploadInput" class="form-control" name="scenario" />
            </div>
            <div class="form-group">
                <label>Instance type</label>
                <select class="form-control" name="instance_type">
                    <option value="t2.medium">t2.medium</option>
                </select>
            </div>
            <div class="form-group">
                <label>Number of threads:</label>
                <input type="text" name="num_threads" class="form-control"/>
            </div>
            <div class="form-group">
                <label>Host</label>
                <input type="text" name="host" class="form-control"/>
            </div>
            <div class="clearfix"></div>
            <input type="submit" class="btn btn-success" value="Submit" />
        </form>
    </div>
{% endblock %}
