{% extends "base.html" %}
{% block head %}
    <script src="{{ url_for("static", filename="js/echarts.min.js") }}"></script>
    <script src="{{ url_for("static", filename="js/shine.js") }}"></script>
{% endblock %}
{% block main_body %}
    <main role="main" class="" style="margin-left:5%;margin-right:5%;">
        <div class="my-3 p-3 bg-white rounded shadow-sm" style="">
            <h6 class="border-bottom border-gray pb-2 mb-0">Flanking Sequence Finder</h6>
            <div>
                <small id="tip" class="form-text text-muted"
                       style="width:100%;line-height:30px;">Flanking Sequence finder is used to
                    find
                    the upstream & downstream sequence of specific gene.(Maximum value = 2000)</small>
            </div>
            <form style="margin:4%;font-size:15px;overflow: auto;" method="post">
                <div>
                    <div class="form-group" style="display: inline-block;margin-right:30px;">
                        <label for="gene_id" style="margin-bottom:10px;">Gene ID Input</label>
                        <input class="form-control" name="gene_id" id="gene_id" style="width:100%;margin-bottom:10px;" placeholder="gene id">
                    </div>
                    <div style="display: inline-block;margin-right:30px;">
                        <label for="upstream_sequence_length" style="margin-bottom:10px;">Upstream sequence
                            length</label>
                        <input class="form-control" name="upstream_sequence_length" id="upstream_sequence_length" placeholder="upstream sequence length"
                               style="width:100%;margin-bottom:10px;" type="number">
                    </div>
                    <div style="display: inline-block;margin-right:30px;">
                        <label for="downstream_sequence_length" style="margin-bottom:10px;">Downstream sequence
                            length</label>
                        <input class="form-control" name="downstream_sequence_length" id="downstream_sequence_length" placeholder="downstream sequence length"
                               style="width:100%;margin-bottom:10px;" type="number">
                    </div>
                    <div style="display: inline-block">
                        <button class="btn btn-success" type="button"
                                style="margin-top:-5px;display: inline-block;margin-right:30px;"
                                onclick="$('#gene_id').val('Bxy000129');$('#upstream_sequence_length').val('500');$('#downstream_sequence_length').val('500');">
                            Example
                        </button>
                        <button type="submit" class="btn btn-primary" style="display: inline-block;margin-top:-5px;">
                            Submit
                        </button>
                    </div>
                </div>


                {% if error_message %}
                    <p style="color: darkred; text-align: center;">Warning! {{ error_message }}</p>
                {% endif %}
            </form>
            <small class="d-block text-right mt-3">
                <a href="#">All updates</a>
            </small>
        </div>

        {% if fasta_item %}
            <div class="my-3 p-3 bg-white rounded shadow-sm widget-header" style="">
                <h6 class="border-bottom border-gray pb-2 mb-0">Upstream & Downstream Sequence Results</h6>
                <p style="font-size:16px;margin-top: 10px;"><b><i>Upstream Sequence:</i></b></p>
                <p style="word-break:break-all;">{{ fasta_item.up_stream_seq }}</p>

                <p style="font-size:16px;"><b><i>Intron &amp; Extron Sequence:</i></b></p>
                <p style="word-break:break-all;color:#FFFFFF;background-color:#6f42c1;">{{ fasta_item.intron_extron_seq }}</p>

                <p style="font-size:16px;"><b><i>Downstream Sequence:</i></b></p>
                <p style="word-break:break-all;">{{ fasta_item.down_stream_seq }}</p>
            </div>
        {% endif %}
    </main>
{% endblock %}