{% extends 'base.html' %}
{% block scripts %}
    {{ super() }}
    <script src="{{ url_for('static', filename='js/chosen.jquery.min.js') }}" type="text/JavaScript"></script>
    <script src="{{ url_for('static', filename='js/FileSaver.min.js') }}" type="text/JavaScript"></script>
    <script src="{{ url_for('static', filename='js/canvg.min.js') }}" type="text/JavaScript"></script>
    <script src="{{ url_for('static', filename='js/d3.min.js') }}" type="text/JavaScript"></script>
    {% if debug %}
        <script src="{{ url_for('static', filename='js/dgenies.result.js') }}" type="text/JavaScript"></script>
        <script src="{{ url_for('static', filename='js/dgenies.result.controls.js') }}" type="text/JavaScript"></script>
        <script src="{{ url_for('static', filename='js/dgenies.result.export.js') }}" type="text/JavaScript"></script>
        <script src="{{ url_for('static', filename='js/dgenies.result.summary.js') }}" type="text/JavaScript"></script>
        <script src="{{ url_for('static', filename='js/d3.boxplot.js') }}" type="text/JavaScript"></script>
        <script src="{{ url_for('static', filename='js/d3.boxplot.zoom.js') }}" type="text/JavaScript"></script>
        <script src="{{ url_for('static', filename='js/d3.boxplot.events.js') }}" type="text/JavaScript"></script>
        <script src="{{ url_for('static', filename='js/d3.boxplot.mousetip.js') }}" type="text/JavaScript"></script>
    {% else %}
        <script src="{{ url_for('static', filename='js/dgenies.result.min.js') }}" type="text/JavaScript"></script>
    {% endif %}
    <script src="{{ url_for('static', filename='js/BootstrapMenu.min.js') }}" type="text/JavaScript"></script>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/chosen.min.css') }}" type="text/css">
{% endblock %}
{% block onload %}
    {{ super() }}
    dgenies.result.init('{{ id }}');
{% endblock %}
{% block content %}
{{ super() }}

<div id="supdraw">
    <div class="top-forms">
        <form id="select-zone">
            <div class="chosen-widget">
                <select id="select-target" data-placeholder="Select a target...">
                    <option value="###NONE###" label=" "></option>
                </select>
            </div>
            <div class="chosen-widget">
                <select id="select-contig" data-placeholder="Select a query...">
                    <option value="###NONE###" label=" "></option>
                </select>
            </div>
            <input type="button" class="submit" value="Apply"/>
            <input type="button" onclick="location.href='/documentation/result';" value="Help"/>
        </form>
        <form id="export">
            <select style="width:240px">
                <option value="0" selected disabled hidden>Export...</option>
                <option value="1">Svg</option>
                <option value="2">Png</option>
                <option value="10">Offline viewer</option>
                <option value="3">Paf file</option>
                {% if not is_gallery and fasta_file %}
                    <option value="4">Query Fasta</option>
                    <option value="8">Query assembled as reference</option>
                {% endif %}
                <option value="5">Association table</option>
                <option value="6">No match queries</option>
                <option value="7">No match targets</option>
                <option value="9">Backup file</option>
            </select>
        </form>
    </div>
    <div class="master">
        <div id="draw"></div>
        <div id="sidebar">
            <div id="legend">
                <div class="title">
                    Legend&nbsp<span class="glyphicon glyphicon-question-sign" style="color: #2aabd2"
                                     title="Click to know how identity is computed"
                                     onclick="location='/documentation/result#identity'"></span>
                </div>
                <div class="draw"></div>
            </div>
            <form id="form-parameters">
                <p><label>Filter small matches:<br/>
                <input type="range" min="0" max="6" value="0" step="1" id="filter_size"/></label></p>
                <p><label>Min identity (abs):<br/>
                <input type="number" min="0" max="0.95" value="0" step="0.05" id="filter_identity"/></label></p>
                <p><label class="input-checkbox-label"><input type="checkbox" id="stroke-linecap"/> Strong precision</label></p>
                <p><label>Stroke width:<br/>
                <input type="range" min="0" max="3" value="1" step="1" id="stroke-width"/></label></p>
                <p><label>Regions delimiters:<br/>
                <input type="range" min="0" max="5" value="2" step="1" id="chroms-limits"/></label></p>
                <p><input type="button" id="sort-contigs" value="Sort contigs"/></p>
                <p><input type="button" id="hide-noise" value="Hide noise"/></p>
                <p><input type="button" id="summary" value="Summary"/></p>
                {% if not is_gallery %}
                    <p class="bottom"><input type="button" id="delete-job" value="Delete job"/></p>
                {% endif %}
            </form>
        </div>
    </div>
    <div id="loading">
        <div class="cssload-container">
            <div class="cssload-whirlpool"></div>
        </div>
        <div class="label">
            <div class="mylabel">
                Loading...
            </div>
        </div>
    </div>
    <div id="export-pict" style="display: none;"></div>
    <div id="modal-stats" style="display: none;">
        <div id="draw-stats" style="margin-top: 15px"></div>
    </div>
</div>
{% endblock %}