{% extends "base.html" %}
{% block head %}
    <style>
        .worm_header {
            height: 150px;
            width: 150px;
            border-radius: 5px;
            border-style: solid;
            border-width: 1px;
            border-color: #727b84;
            margin-top: 5%;
        }
    </style>
{% 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="">
            {% for key,value in result_dict.items() %}
                {% if key == "Scientific classification" %}
                    <div style="width:40%;float:left;height:320px;">
                        <p style="font-size:12pt;"><b><i>{{ key }}</i></b></p>
                        {% for kk,vv in value.items() %}
                            <p style="font-size:9pt;line-height:10px;text-indent: 2em;"><b><i>{{ kk }}:</i></b>{{ vv|safe }}
                            </p>
                        {% endfor %}
                    </div>
                {% endif %}
            {% endfor %}
            <div style="width:60%;float:right;height:320px;">
                <img src="../static/images/worms/{{ spe_chosen.id_starts }}.png" class="worm_header">
            </div>

            {% for key,value in result_dict.items() %}

                {% if key != "Scientific classification" %}

                    <p style="font-size:12pt;"><b><i>{{ key }}</i></b></p>
                    <p style="text-indent:2em;">{{ value|safe }}</p>

                {% endif %}

            {% endfor %}

        </div>
    </main>
{% endblock %}