{% extends "base.html" %}
{% block head %}
    <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts-en.common.js"></script>
{% 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="">
            <h5 class="border-bottom border-gray pb-2 mb-0" style="margin:2%;"><i>Basic Information for gene:{{ gene_id }}</i></h5>
            <div class="media" style="margin:2%;">
              <img src="../static/images/worms/{{ spe_chosen.id_starts }}.png" class="align-self-center mr-3 rounded border" alt="..." style="width:64px;height:64px;">
              <div class="media-body">
                  <h5 style="font-size:14px;">Organism : <i>{{ spe_chosen.latin_name }}</i></h5>
                  <h5 style="font-size:14px;">Nucleic acid sequence length : {{ cds.sequence | length}}</h5>
                  <h5 style="font-size:14px;">protein sequence length : {{ pep.sequence | length}}</h5>
                  {% if gf %}
                      <h5 style="font-size:14px;">gene family : {% for i in gf %}{{ i.gene_family_name }}<a href="http://pfam.xfam.org/family/{{ i.pfam_id }}"><i> Link to Pfam</i></a>{% endfor %}</h5>
                  {% endif %}
              </div>
            </div>
            <p style="font-size:14px;margin:2%;"><i><b>GoTo</b> <a href="#sequence">Sequence</a> / <a href="#goannotation">Go Annotation</a> / <a href="#expression">Expression Data</a></i></p>
            <small class="d-block text-right mt-3">
                <a href="#">All updates</a>
            </small>
        </div>
        <div class="my-3 p-3 bg-white rounded shadow-sm" style="word-break: break-all;"  id="sequence">
            <h5 class="border-bottom border-gray pb-2 mb-0" style="margin:2%;"><i>Sequence for gene:{{ gene_id }}</i></h5>
            <h6 style="margin:2% 2% 1% 2%;">Coding sequence</h6>
                <p style="margin:2%;font-size:12px;">{{ cds.sequence }}</p>
            <h6 style="margin:1% 2% 1% 2%;">Protein sequence</h6>
                <p style="margin:2%;font-size: 12px;">{{ pep.sequence }}</p>
                <small class="d-block text-right mt-3">
                    <a href="#">All updates</a>
                </small>
            </div>
        <div class="my-3 p-3 bg-white rounded shadow-sm" style="" id="goannotation">
            <h5 class="border-bottom border-gray pb-2 mb-0" style="margin:2%;"><i>Annotation Information for gene:{{ gene_id }}</i></h5>
            <div class="media" style="margin:2%;">
              <table class="table table-hover" style="font-size:14px;">
                <thead>
                    <tr>
                        <th>Data Source</th>
                        <th>Annotation ID</th>
                        <th>Information</th>
                        <th>start</th>
                        <th>end</th>
                    </tr>
                </thead>
                <tbody>
                {% for i in ant_info %}
                    <tr>
                    {% for j in i %}
                        <td>{{ j }}</td>
                    {% endfor %}
                    </tr>
                {% endfor %}
                </tbody>
            </table>
            </div>
            <small class="d-block text-right mt-3">
                <a href="#">All updates</a>
            </small>
        </div>
        <div class="my-3 p-3 bg-white rounded shadow-sm" style="word-break: break-all;" id="expression">
            <h5 class="border-bottom border-gray pb-2 mb-0" style="margin:2%;"><i>Expression data for gene:{{ gene_id }}</i></h5>
            <div id="fpkm" style="width: 1120px;height:400px;"></div>
            <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('fpkm'));
        var option = {
            tooltip: {},
            legend: {
                data:['FPKM value']
            },
            xAxis: {
                data: [
                    {% for i in cols %}
                        "{{ i }}",
                    {% endfor %}
                    ]
            },
            yAxis: {},
            series: [{
                name: 'FPKM value',
                type: 'bar',
                data: [
                    {% for i in fpkm %}
                        {{ i }},
                    {% endfor %}
                    ]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
        </div>
    </main>
{% endblock %}