{% extends "framework.html" %}

{% block content %}

    {% block action_modals %}
        {% include "modals/objects/edit_rule_modal.html" %}
        {% include "modals/objects/generic_set_aliases_modal.html" %}
        {% include "modals/objects/generic_set_scenario_modal.html" %}
        {% include "modals/objects/generic_copy_object_modal.html" %}
        {% include "modals/objects/generic_delete_modal.html" %}
    {% endblock action_modals %}

<div class="panel-group" id="rule-detail">
    <div class="panel panel-default">
        <div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
            {{ rule.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/rule.html" %}
                    {% endblock %}
                </ul>
            </div>
        </div>
        <div class="panel-body">
            <p>
                {{ rule.description|safe }}
            </p>
        </div>

        {% if rule.aliases %}
            <!-- Aliases -->
            <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
                <h4 class="panel-title">
                    <a id="rule-aliases-link" data-toggle="collapse" data-parent="#rule-detail"
                       href="#rule-aliases">Aliases</a>
                </h4>
            </div>
            <div id="rule-aliases" class="panel-collapse collapse in">
                <div class="panel-body list-group-item">
                    {% for alias in rule.aliases %}
                        <a class="list-group-item">{{ alias }}</a>
                    {% endfor %}
                </div>
            </div>
        {% endif %}

        <!-- Reaction Patterns -->
        <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
            <h4 class="panel-title">
                <a id="rule-reaction-patterns-link" data-toggle="collapse" data-parent="#rule-detail"
                   href="#rule-reaction-patterns">Reaction Patterns</a>
            </h4>
        </div>
        <div id="rule-reaction-patterns" class="panel-collapse collapse in">
            <div class="panel-body list-group-item">
                {% for r in rule.srs %}
                <a class="list-group-item" href="{{ r.url }}">{{ r.name }}</a>
                <div align="center">
                    <p>
                        {{r.as_svg|safe}}
                    </p>
                </div>
                {% endfor %}
            </div>
        </div>

        <!-- Scenarios -->
        {% if rule.scenarios.all %}
            <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
                <h4 class="panel-title">
                    <a id="rule-scenario-link" data-toggle="collapse" data-parent="#rule-detail"
                       href="#rule-scenario">Scenarios</a>
                </h4>
            </div>
            <div id="rule-scenario" class="panel-collapse collapse in">
                <div class="panel-body list-group-item">
                    {% for s in rule.scenarios.all %}
                        <a class="list-group-item" href="{{ s.url }}">{{ s.name }} <i>({{ s.package.name }})</i></a>
                    {% endfor %}
                </div>
            </div>
        {% endif %}

        {% if rule.enzymelinks %}
            <!-- EC Numbers -->
            <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
                <h4 class="panel-title">
                    <a id="rule-ec-numbers-link" data-toggle="collapse" data-parent="#rule-detail"
                       href="#rule-ec-numbers">EC Numbers</a>
                </h4>
            </div>
            <div id="rule-ec-numbers" class="panel-collapse collapse in">
                <div class="panel-body list-group-item">
                    {% for k, v in rule.get_grouped_enzymelinks.items %}
                        <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
                            <h4 class="panel-title">
                                <a id="{{ k|slugify }}_Link" data-toggle="collapse"
                                   data-parent="#{{ k|slugify }}_Accordion"
                                   href="#{{ k|slugify }}">
                                    {{ k }}
                                </a>
                            </h4>
                        </div>
                        <div id="{{ k|slugify }}" class="panel-collapse collapse in">
                            <div class="panel-body list-group-item">
                                {% for enzyme in v %}
                                    <a class="list-group-item" href="{{ enzyme.url }}">
                                        {{ enzyme.ec_number }}
                                        <div style="position:absolute;bottom:10px;left:100px;">{{ enzyme.name }}</div>
                                        <div style="float:right;">{{ enzyme.linking_method }}</div>
                                    </a>
                                {% endfor %}
                            </div>
                        </div>
                    {% endfor %}
                </div>
            </div>
        {% endif %}
    </div>
</div>
{% endblock content %}