{% extends "base.html" %}
{% 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 Search Panel</h6>
            <form style="margin:4%;font-size:15px;" method="post">
              <div class="form-group">
                <label for="exampleInputEmail1" style="margin-bottom:10px;">Gene ID Input</label>
                <input class="form-control" name="gene_id" id="gd" style="width:35%;margin-bottom:10px;">
                <small id="emailHelp" class="form-text text-muted" style="text-indent: 2em;width:50%;line-height:22px;">Click the example button.it will offer you a example gene then you can get the detail information by clicking the search button. The detail information including the CDS sequence, PEP sequence, Go annotation and the KEGG annotation.</small>
              </div>
                <button class="btn btn-success" type="button" style="margin-left:5%;margin-right:6%;" onclick="$('#gd').val('Bxy013486');">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>
    </main>
{% endblock %}