{% 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:10%;margin-right:10%;">
        <div class="my-3 p-3 bg-white rounded shadow-sm" style="">
            <h6 class="border-bottom border-gray pb-2 mb-0">miRNA Search Panel</h6>
            <form style="margin:4%;font-size:15px;" method="post">
                <div class="form-group">
                    <label for="species_list" style="margin-bottom:10px;">Species Selection</label>
                    <select class="form-control" name="spe" style="width:300px;margin-bottom:20px;">
                        {% for i in spe %}
                            {% if i.full_supports %}
                                <option value="{{ i.id_starts }}">{{ i.latin_name }}</option>
                            {% endif %}
                        {% endfor %}
                    </select>
                    <h5><b>miRNA class</b></h5>
                    <small id="emailHelp" class="form-text text-muted" style="width:70%;">- Please enter the miRNA name
                        like mir-238.</small>
                    <small id="emailHelp" class="form-text text-muted" style="width:100%;">- If there is no input, it
                        will
                        return you with first 20 Precursor sequences of all miRNAs</small>

                    <input class="form-control" name="mirna" id="mirna"
                           placeholder="microRNA"
                           style="width:50%;margin-bottom:10px;margin-top: 10px;">
                </div>
                <div style="display: inline-block">
                    <button name="submit" type="submit" class="btn btn-primary" style="display: inline-block;">
                        Submit
                    </button>
                    <button name="example" class="btn btn-success" type="submit"
                            style="display: inline-block;margin-left:20px;">
                        Example
                    </button>

                </div>

            </form>
            {% if mirnas %}
                <div class="well">
                    {% for mirna in mirnas %}
                        <div class="panel panel-success">
                            <div class="panel-heading">{{ mirna.target_name }}</div>
                            <div class="panel-body" style="display: block" id="{{ mirna.target_name }}">
                                <p style="word-break:break-word;">Precursor sequence :
                                    {{ mirna.sequence }}</p>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            {% endif %}
            <small class="d-block text-right mt-3">
                <a href="#">All updates</a>
            </small>
        </div>

    </main>
{% endblock %}