{% 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 }}',
    {{ tools_ava }});
{% endblock %}
{% block content %}
    {% set fnote = 1 %}
    <style>
        .tab2 {
            display: none;
        }
    </style>
    {% if inforun is not none %}
        <div>
            <div class="inforun {{ inforun.type }}">
                {{ inforun.message | safe }}
            </div>
        </div>
    {% endif %}
    <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 <sup><a href="#fn{{ fnote }}" id="ref{{ fnote }}">{{ fnote }}</a></sup>{% set fnote = fnote + 1 %}</label>
                                </td>
                                <td>
                                    <input type="email" name="email" id="email" value="{{ email }}" required/>
                                </td>
                            </tr>
                            {% endif %}
                            <tr>
                                <td colspan="2">
                                    <div id="tabs">
                                        <div class="tab active" id="tab1">New alignment</div>
                                        <div class="tab" id="tab2">Plot alignment</div>
                                    </div>
                                </td>
                            </tr>

                            {# Tab 1 #}
                            <tr class="target tabx tab1">
                                <td>
                                    <label for="file_target" class="file-target">Target fasta <sup><a href="#fn{{ fnote }}" id="ref{{ fnote }}">{{ fnote }}</a></sup></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 tabx tab1">
                                <td>
                                    <label for="file_query" class="file-query">Query fasta <sup><a href="#fn{{ fnote }}" id="ref{{ fnote }}">{{ fnote }}</a></sup></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>
                            {% if tools | length > 1 %}
                                <tr class="tabx tab1">
                                    <td>
                                        <label class="tools">Aligner</label>
                                    </td>
                                    <td>
                                    {% for tool in tools_names %}
                                        <label style="vertical-align: bottom; line-height: 35px;" class="radio-inline">
                                            <input type="radio" id="tool-{{ tool }}" name="tool" value="{{ tool }}"
                                            {% if loop.index0 == 0 %}checked{% endif %} style="vertical-align: top;"/>
                                            {{ tools[tool].label | capitalize }}
                                            <span class="glyphicon glyphicon-question-sign" style="color: #2aabd2"
                                                  title="{{ tools[tool].help }}"></span>
                                        </label>
                                    {% endfor %}
                                    </td>
                                </tr>
                            {% else %}
                                <tr class="tabx tab1">
                                <td colspan="2">
                                    {% for tool in tools_names %}
                                        <input type="radio" name="tool" id="tool" value="{{ tool }}" style="display: none;"
                                         checked/>
                                    {% endfor %}
                                </td>
                                </tr>
                            {% endif %}
                            {% if tools | length > 1 %}
                                {% for tool in tools_names %}
                                    <tr class="tabx tab1 optionx tool-options-{{tool}} {% if loop.index0 != 0 or not tools[tool].options %}hidden{% endif %}">
                                        <td colspan="2" style="vertical-align:top;">
                                            <div id="tool-options-{{tool}}">
                                                <label class="options">Options</label>
                                            </div>
                                        </td>
                                    </tr>
                                    {% if tools[tool].options %}
                                        <tr class="tabx tab1 optionx tool-options-{{tool}} {% if loop.index0 != 0 %}hidden{% endif %}" >
                                            {% for opt in tools_options[tool] %}
                                                {% set outer_loop = loop %}
                                                <td style="vertical-align:top;">
                                                    {{ opt.label }}&nbsp<span class="glyphicon glyphicon-question-sign" style="color: #2aabd2"
                                                                              title="{{ opt.help }}"></span>
                                                </td>
                                                <td>
                                                    {% for entry in opt['entries'] %}
                                                        <div class="form-check">
                                                            <input type="{{ opt.type }}" id="tool-options-{{tool}}-{{ outer_loop.index0 }}-{{ loop.index0 }}"
                                                                   name="tool-options-{{tool}}-{{ outer_loop.index0 }}{% if opt.type != 'radio' %}-{{loop.index0}}{% endif %}"
                                                                   value="tool-options-{{tool}}-{{ outer_loop.index0 }}-{{ loop.index0 }}"
                                                                   class="form-check-input"
                                                                   {% if entry.default %}checked{% endif %}/>
                                                            <label class="form-check-label" style="vertical-align: bottom; line-height: 30px; font-weight: normal;"
                                                                   for="tool-options-{{tool}}-{{ outer_loop.index0 }}-{{ loop.index0 }}">
                                                                {{ entry.label | capitalize }}&nbsp<span class="glyphicon glyphicon-question-sign" style="color: #2aabd2"
                                                                      title="{{ entry.help }}"></span>
                                                            </label>
                                                        </div>
                                                    {% endfor %}
                                                </td>
                                            {% endfor %}
                                        </tr>
                                    {% endif %}
                                {% endfor %}
                            {% else %}
                                {% set tool = tools_names[0] %}
                                <tr class="tabx tab1 optionx tool-options-{{tool}} {% if not tools[tool].options %}hidden{% endif %}">
                                    <td colspan="2" style="vertical-align:top;">
                                        <div id="tool-options">
                                            <label class="options">Options</label>
                                        </div>
                                    </td>
                                </tr>
                                {% if tools[tool].options %}
                                    <tr class="tabx tab1 optionx tool-options-{{tool}}" >
                                        {% for opt in tools[tool].options %}
                                            <td style="vertical-align:top;">
                                                {{ opt.label }}&nbsp<span class="glyphicon glyphicon-question-sign" style="color: #2aabd2"
                                                                          title="{{ opt.help }}"></span>
                                            </td>
                                            <td>
                                                {% for entry in opt['entries'] %}
                                                <div class="form-check">
                                                    <input class="form-check-input"
                                                           type="{{ opt.type }}"
                                                           id="tool-options-{{tool}}-0-{{ loop.index0 }}"
                                                           name="tool-options-{{tool}}-0{% if opt.type != 'radio' %}-{{loop.index0}}{% endif %}"
                                                           value="tool-options-{{tool}}-0-{{ loop.index0 }}"
                                                           {% if entry.default %}checked{% endif %}/>
                                                    <label class="form-check-label"
                                                           for="tool-options-{{tool}}-0-{{ loop.index0 }}"
                                                           style="vertical-align: bottom; line-height: 30px; font-weight: normal;">
                                                        {{ entry.label | capitalize }}&nbsp<span class="glyphicon glyphicon-question-sign" style="color: #2aabd2"
                                                              title="{{ entry.help }}"></span>
                                                    </label>
                                                </div>
                                                {% endfor %}
                                            </td>
                                        {% endfor %}
                                    </tr>
                                {% endif %}
                            {% endif %}


                            {# Tab 2 #}
                            <tr class="alignfile tabx tab2">
                                <td>
                                    <label for="file_align" class="file-align">Alignment file <sup><a href="#fn{{ fnote }}" id="ref{{ fnote }}">{{ fnote }}</a></sup>{% set fnote = fnote + 1 %}</label>
                                </td>
                                <td class="input-group">
                                    <select class="select-type-input alignfile">
                                        <option value="0">Local</option>
                                        <option value="1">Url</option>
                                    </select>

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

                                    <button class="btn btn-file" type="button" id="button-alignfile" title="Select a file">
                                        <span class="glyphicon glyphicon-folder-open"></span>&nbsp
                                    </button>
                                    <div class="loading-file alignfile" style="display: none"></div>
                                    <div class="upload-success alignfile" style="display: none"></div>
                                    <div class="file-size alignfile"></div>
                                </td>
                            </tr>
                            <tr class="targetidx tabx tab2">
                                <td>
                                    <label for="file_targetidx" class="file-targetidx">Target file<sup><a href="#fn{{ fnote }}" id="ref{{ fnote }}">{{ fnote }}</a></sup></label>
                                </td>
                                <td class="input-group">
                                    <select class="select-type-input targetidx">
                                        <option value="0">Local</option>
                                        <option value="1">Url</option>
                                    </select>

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

                                    <button class="btn btn-file" type="button" id="button-targetidx" title="Select a file">
                                        <span class="glyphicon glyphicon-folder-open"></span>&nbsp
                                    </button>
                                    <div class="loading-file targetidx" style="display: none"></div>
                                    <div class="upload-success targetidx" style="display: none"></div>
                                    <div class="file-size targetidx"></div>
                                </td>
                            </tr>
                            <tr class="queryidx tabx tab2">
                                <td>
                                    <label for="file_queryidx" class="file-queryidx">Query file<sup><a href="#fn{{ fnote }}" id="ref{{ fnote }}">{{ fnote }}</a></sup>{% set fnote = fnote + 1 %}</label>
                                </td>
                                <td class="input-group">
                                    <select class="select-type-input queryidx">
                                        <option value="0">Local</option>
                                        <option value="1">Url</option>
                                    </select>

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

                                    <button class="btn btn-file" type="button" id="button-queryidx" title="Select a file">
                                        <span class="glyphicon glyphicon-folder-open"></span>&nbsp
                                    </button>
                                    <div class="loading-file queryidx" style="display: none"></div>
                                    <div class="upload-success queryidx" style="display: none"></div>
                                    <div class="file-size queryidx"></div>
                                </td>
                            </tr>
                            <tr class="tabx tab2">
                                <td colspan="2">
                                    <h3 class="orsep">- or -</h3>
                                </td>
                            </tr>
                            <tr class="backup tabx tab2">
                                <td>
                                    <label for="file_backup" class="file-backup">Backup file<sup><a href="#fn{{ fnote }}" id="ref{{ fnote }}">{{ fnote }}</a></sup>{% set fnote = fnote + 1 %}</label>
                                </td>
                                <td class="input-group">
                                    <select class="select-type-input backup">
                                        <option value="0">Local</option>
                                        <option value="1">Url</option>
                                    </select>

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

                                    <button class="btn btn-file" type="button" id="button-backup" title="Select a file">
                                        <span class="glyphicon glyphicon-folder-open"></span>&nbsp
                                    </button>
                                    <div class="loading-file backup" style="display: none"></div>
                                    <div class="upload-success backup" style="display: none"></div>
                                    <div class="file-size backup"></div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </fieldset>
            <div class="buttons">
                <button type="button" id="submit">Submit</button>
                {% if example %}
                <button type="button" id="example">Load example</button>
                {% endif %}
            </div>
            <div class="footnotes">
                {% set fnote = 1 %}
                {% if mode == "webserver" %}
                    <p class="afterworlff"><sup id="fn{{ fnote }}"><a href="#fn{{ fnote }}" id="ref{{ fnote }}">{{ fnote }}</a></sup> We will send you results by mail.</p>
                    {% set fnote = fnote + 1 %}
                {% endif %}
                <div class="tabx tab1">
                    {% set fnote_tab = fnote %}
                    <p class="afterworlff"><sup id="fn{{ fnote_tab }}"><a href="#fn{{ fnote_tab }}" id="ref{{ fnote_tab }}">{{ fnote_tab }}</a></sup> Can be gzipped. Must end with <code>.fa</code>, <code>.fasta</code>, <code>.fna</code>, <code>.fa.gz</code>, <code>.fasta.gz</code>or <code>.fna.gz</code></p>
                    {% set fnote_tab = fnote_tab + 1 %}
                </div>
                <div class="tabx tab2">
                    {% set fnote_tab = fnote %}
                    <p class="afterworlff"><sup id="fn{{ fnote_tab }}"><a href="#fn{{ fnote_tab }}" id="ref{{ fnote_tab }}">{{ fnote_tab }}</a></sup> In PAF or MAF format. Must end with <code>.paf</code>, <code>.maf</code></p>
                    {% set fnote_tab = fnote_tab + 1 %}
                    <p class="afterworlff"><sup id="fn{{ fnote_tab }}"><a href="#fn{{ fnote_tab }}" id="ref{{ fnote_tab }}">{{ fnote_tab }}</a></sup> Fasta file or index built by <a href="https://raw.githubusercontent.com/genotoul-bioinfo/dgenies/v{{version}}/src/dgenies/bin/index.py" download="index.py">our tool</a>. Must end with <code>.fa</code>, <code>.fasta</code>, <code>.fna</code>, <code>.fa.gz</code>, <code>.fasta.gz</code>, <code>.fna.gz</code> or <code>.idx</code>.</p>
                    {% set fnote_tab = fnote_tab + 1 %}
                    <p class="afterworlff"><sup id="fn{{ fnote_tab }}"><a href="#fn{{ fnote_tab }}" id="ref{{ fnote_tab }}">{{ fnote_tab }}</a></sup> TAR file from a previous run or built following <a href="/documentation/formats#backup-file"> this documentation</a>. Must ends with <code>.tar</code> or <code>.tar.gz</code>.</p>
                    {% set fnote_tab = fnote_tab + 1 %}
                </div>
            </div>
        </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"/>
            <input type="file" name="file-alignfile" class="file-alignfile" data-url="/upload"/>
            <input type="file" name="file-targetidx" class="file-targetidx" data-url="/upload"/>
            <input type="file" name="file-queryidx" class="file-queryidx" data-url="/upload"/>
            <input type="file" name="file-backup" class="file-backup" data-url="/upload"/>
        </div>
    </form>
{% endblock %}