{% extends "base.html" %}
{% block head %}
{% endblock %}
{% block main_body %}
    <main role="main" class="" style="margin-left:20%;margin-right:20%;">
        <div class="my-3 p-3 bg-white rounded shadow-sm" style="">
            <h6 class="border-bottom border-gray pb-2 mb-0">Gene Family Search Panel</h6>
            <form style="margin:4%;font-size:15px;" method="post">
                <div class="form-group">
                    <label for="exampleInputEmail1" style="margin-bottom:10px;">Gene Family Name / PFAM ID Input</label>
                    <input class="form-control" name="gf" id="gf" style="width:35%;margin-bottom:10px;">
                    <label for="exampleInputEmail1" style="margin-bottom:10px;">Species Selection</label>
                    {% for i in spe %}
                        {% if i.full_supports %}
                            <div>
                                <label><input type="checkbox" value="{{ i.latin_name }}"
                                              name="species_list"> {{ i.latin_name }}</label>
                            </div>
                        {% endif %}
                    {% endfor %}
                    <small id="emailHelp" class="form-text text-muted" style="width:70%;">Gene search function requires
                        a gene family name input for the query task.</small>
                    <small id="emailHelp" class="form-text text-muted" style="width:70%;">The result includes a set of
                        gene list.</small>
                    <small id="emailHelp" class="form-text text-muted" style="width:70%;">You are free to download them
                        in FASTA format.</small>
                </div>
                <button class="btn btn-success" type="button" style="margin-left:5%;margin-right:6%;"
                        onclick="$('#gf').val('PF00225.24');">Example
                </button>
                <button type="submit" class="btn btn-primary">Submit</button>
            </form>
            <small class="d-block text-right mt-3">
                <a href="#">All updates</a>
            </small>
        </div>
        {% if gf_result %}
            <div class="my-3 p-3 bg-white rounded shadow-sm" style="">
                <h6 class="border-bottom border-gray pb-2 mb-0">Gene Family Search Result | {{ gf_result | length }}
                    hits | Download <a href="{{ url_for("views.dna_sequences", gene_id_list=gene_id_list) }}">DNA</a> or
                    <a href="{{ url_for("views.protein_sequences", gene_id_list=gene_id_list) }}">protein</a> in FASTA
                    format</h6>
                <ul style="width:40%;font-size:16px;list-style: none;margin-top:40px;">
                    {% for i in gf_result %}
                        <li style="height:24px;"><a
                                href="{{ url_for("views.gene", gene_id=i.gene_id) }}">{{ i.gene_id }}</a></li>
                    {% endfor %}
                </ul>
                <small class="d-block text-right mt-3">
                    <a href="#">All updates</a>
                </small>
            </div>
        {% endif %}
    </main>
{% endblock %}