{% extends "framework.html" %}

{% block content %}

    {% block action_modals %}
        {% include "modals/objects/edit_reaction_modal.html" %}
        {% include "modals/objects/delete_reaction_modal.html" %}
    {% endblock action_modals %}

    <div class="panel-group" id="reaction-detail">
        <div class="panel panel-default">
            <div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
                {{ reaction.name }}
                <div id="actionsButton"
                     style="float: right;font-weight: normal;font-size: medium;position: relative; top: 50%; transform: translateY(-50%);z-index:100;display: none;"
                     class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                                         aria-haspopup="true" aria-expanded="false"><span
                        class="glyphicon glyphicon-wrench"></span> Actions <span class="caret"></span><span
                        style="padding-right:1em"></span></a>
                    <ul id="actionsList" class="dropdown-menu">
                        {% block actions %}
                            {% include "actions/objects/reaction.html" %}
                        {% endblock %}
                    </ul>
                </div>
            </div>

            <!-- Description -->
            <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
                <h4 class="panel-title">
                    <a id="reaction-desc-link" data-toggle="collapse" data-parent="#reaction-detail"
                       href="#reaction-desc">Description</a>
                </h4>
            </div>
            <div id="reaction-desc" class="panel-collapse collapse in">
                <div class="panel-body list-group-item">
                    {{ reaction.description }}
                </div>
            </div>

            <!-- Image -->
            <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
                <h4 class="panel-title">
                    <a id="reaction-image-link" data-toggle="collapse" data-parent="#reaction-detail"
                       href="#reaction-image">Image Representation</a>
                </h4>
            </div>
            <div id="reaction-image" class="panel-collapse collapse in">
                <div class="panel-body list-group-item">
                    <div id="image-div" align="center">
                        {{ reaction.as_svg|safe }}
                    </div>
                </div>
            </div>

            <!-- Reaction Description -->
            <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
                <h4 class="panel-title">
                    <a id="reaction-description-link" data-toggle="collapse" data-parent="#reaction-description-detail"
                       href="#reaction-description-smiles">Reaction Description</a>
                </h4>
            </div>
            <div id="reaction-description-smiles" class="panel-collapse collapse in">
                <div class="panel-body list-group-item">
                    {% for educt in reaction.educts.all %}
                        <a class="btn btn-default" href="{{ educt.url }}">{{ educt.name }}</a>
                    {% endfor %}
                    <span class="glyphicon glyphicon-arrow-right" style="margin-left:5em;margin-right:5em;"
                          aria-hidden="true"></span>
                    {% for product in reaction.products.all %}
                        <a class="btn btn-default" href="{{ product.url }}">{{ product.name }}</a>
                    {% endfor %}
                </div>
            </div>

            <!-- SMIRKS -->
            <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
                <h4 class="panel-title">
                    <a id="reaction-smirks-link" data-toggle="collapse" data-parent="#reaction-detail"
                       href="#reaction-smirks">SMIRKS Representation</a>
                </h4>
            </div>
            <div id="reaction-smirks" class="panel-collapse collapse in">
                <div class="panel-body list-group-item">
                    {{ reaction.smirks }}
                </div>
            </div>

            {% if reaction.rules.all %}
                <!-- Rules -->
                <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
                    <h4 class="panel-title">
                        <a id="reaction-rules-link" data-toggle="collapse" data-parent="#reaction-detail"
                           href="#reaction-rules">Rules</a>
                    </h4>
                </div>
                <div id="reaction-rules" class="panel-collapse collapse in">
                    <div class="panel-body list-group-item">
                        {% for r in reaction.rules.all %}
                            <a class="list-group-item" href="{{ r.url }}">{{ r.name }}</a>
                        {% endfor %}
                    </div>
                </div>
            {% endif %}

            {% if reaction.related_pathways %}
                <!-- Pathways -->
                <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
                    <h4 class="panel-title">
                        <a id="reaction-pathway-link" data-toggle="collapse" data-parent="#reaction-detail"
                           href="#reaction-pathway">Pathways</a>
                    </h4>
                </div>
                <div id="reaction-pathway" class="panel-collapse collapse in">
                    <div class="panel-body list-group-item">
                        {% for r in reaction.related_pathways %}
                            <a class="list-group-item" href="{{ r.url }}">{{ r.name }}</a>
                        {% endfor %}
                    </div>
                </div>

                </div>
            {% endif %}

    </div>
{% endblock content %}