{% extends 'base.html' %}
{% block scripts %}
    {{ super() }}
    {% if debug %}
        <!-- The basic File Upload plugin -->
        <script src="{{ url_for('static', filename='js/jquery.fileupload.js') }}"></script>
        <!-- The File Upload processing plugin -->
        <script src="{{ url_for('static', filename='js/jquery.fileupload-process.js') }}"></script>
        <!-- The File Upload validation plugin -->
        <script src="{{ url_for('static', filename='js/jquery.fileupload-validate.js') }}"></script>
        <script src="{{ url_for('static', filename='js/dgenies.run.js') }}" type="text/JavaScript"></script>
    {% else %}
        <script src="{{ url_for('static', filename='js/jquery.fileupload.min.js') }}"></script>
        <script src="{{ url_for('static', filename='js/dgenies.run.min.js') }}" type="text/JavaScript"></script>
    {% endif %}
{% endblock %}
{% block onload %}
    {{ super() }}
    dgenies.run.init('{{ s_id }}',{{ allowed_ext }}, {{ max_upload_file_size }}, '{{ target }}', '{{ query }}');
{% endblock %}
{% block content %}
    <form id="submit_minimap" method=post action="#">
        <h2 class="title-launch">Launch map analysis</h2>
        <div class="errors-submit">
            <ul class=flashes>
                {% with messages = get_flashed_messages() %}
                    {% if messages %}
                        {% for message in messages %}
                            <li>{{ message | safe }}</li>
                        {% endfor %}
                    {% endif %}
                {% endwith %}
            </ul>
        </div>
        <div class="submit-form">
            <fieldset>
                <div>
                    <table>
                        <tbody>
                            <tr class="id_job">
                                <td>
                                    <label for="id_job" class="id-job">Name of your job</label>
                                </td>
                                <td>
                                    <input type="text" id="id_job" name="id_job" value="{{ id_job }}" autocomplete="Off" required/>
                                </td>
                            </tr>
                            {% if mode == "webserver" %}
                            <tr class="email">
                                <td>
                                    <label for="email" class="email">E-mail*</label>
                                </td>
                                <td>
                                    <input type="email" name="email" id="email" value="{{ email }}" required/>
                                </td>
                            </tr>
                            {% endif %}
                            <tr class="target">
                                <td>
                                    <label for="file_target" class="file-target">Target fasta**</label>
                                </td>
                                <td class="input-group">
                                    <select class="select-type-input target">
                                        <option value="0">Local</option>
                                        <option value="1">Url</option>
                                    </select>

                                    <div class="target-label in-label">
                                        <div id="progress-target" class="progress">
                                            <div class="bar" style="width: 0%;"></div>
                                        </div>
                                        <input id="target" name="target" class="form-control show-file" type="text" value="" readonly/>
                                    </div>

                                    <button class="btn btn-file" type="button" id="button-target" title="Select a file">
                                        <span class="glyphicon glyphicon-folder-open"></span>&nbsp
                                    </button>
                                    <div class="loading-file target" style="display: none"></div>
                                    <div class="upload-success target" style="display: none"></div>
                                    <div class="file-size target"></div>
                                </td>
                            </tr>
                            <tr class="query">
                                <td>
                                    <label for="file_query" class="file-query">Query fasta**</label>
                                </td>
                                <td class="input-group">
                                    <select class="select-type-input query">
                                        <option value="0">Local</option>
                                        <option value="1">Url</option>
                                    </select>

                                    <div class="query-label in-label">
                                        <div id="progress-query" class="progress">
                                            <div class="bar" style="width: 0%;"></div>
                                        </div>
                                        <input id="query" name="query" class="form-control show-file" type="text" value="" readonly/>
                                    </div>

                                    <button class="btn btn-file" type="button" id="button-query" title="Select a file">
                                        <span class="glyphicon glyphicon-folder-open"></span>&nbsp
                                    </button>
                                    <div class="loading-file query" style="display: none"></div>
                                    <div class="upload-success query" style="display: none"></div>
                                    <div class="file-size query"></div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </fieldset>
            <p class="afterworlff">* We will send you results by mail.</p>
            <p class="afterworlff">** Can be gzipped.</p>
            <button type="button" id="submit">Submit</button>
            {% if example %}
            <button type="button" id="example">Load example</button>
            {% endif %}
        </div>
        <div id="uploading-loading" style="display:none;">Uploading files...</div>
        <div class="hidden-input-files">
            <input type="file" name="file-query" class="file-query" data-url="/upload" title=""/>
            <input type="file" name="file-target" class="file-target" data-url="/upload"/>
        </div>
    </form>
{% endblock %}