{% extends "framework.html" %}

{% block content %}

    {% block action_modals %}
        {% include "modals/objects/edit_compound_modal.html" %}
        {% include "modals/objects/generic_set_aliases_modal.html" %}
        {% include "modals/objects/add_structure_modal.html" %}
        {% include "modals/objects/generic_set_scenario_modal.html" %}
        {% include "modals/objects/generic_set_external_reference_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="compound-detail">
        <div class="panel panel-default">
            <div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
                {{ compound.name|safe }}
                <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/compound.html" %}
                        {% endblock %}
                    </ul>
                </div>
            </div>
            <div class="panel-body">
                <p>
                    The structures stored in this compound can be found at <a target="_blank"
                                                                              href="{{ compound.url }}/structure"
                                                                              role="button">Compound structures
                    &gt;&gt;</a>
                </p>
            </div>

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

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

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

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

            <!-- Canonical SMILES -->
            <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
                <h4 class="panel-title">
                    <a id="compound-canonical-smiles-link" data-toggle="collapse" data-parent="#compound-detail"
                       href="#compound-canonical-smiles">Canonical SMILES Representation</a>
                </h4>
            </div>
            <div id="compound-canonical-smiles" class="panel-collapse collapse in">
                <div class="panel-body list-group-item">
                    {{ compound.default_structure.canonical_smiles }}
                </div>
            </div>

            <!-- InChiKey -->
            <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
                <h4 class="panel-title">
                    <a id="compound-inchi-link" data-toggle="collapse" data-parent="#compound-detail"
                       href="#compound-inchi">InChIKey</a>
                </h4>
            </div>
            <div id="compound-inchi" class="panel-collapse collapse in">
                <div class="panel-body list-group-item">
                    {{ compound.default_structure.inchikey }}
                </div>
            </div>

            <!-- Reactions -->
            {% if compound.related_reactions %}
                <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
                    <h4 class="panel-title">
                        <a id="compound-reaction-link" data-toggle="collapse" data-parent="#compound-detail"
                           href="#compound-reaction">Reactions</a>
                    </h4>
                </div>
                <div id="compound-reaction" class="panel-collapse collapse in">
                    <div class="panel-body list-group-item">
                        {% for r in compound.related_reactions %}
                            <a class="list-group-item" href="{{ r.url }}">{{ r.name|safe }} <i>({{ r.package.name|safe }})</i></a>
                        {% endfor %}
                    </div>
                </div>
            {% endif %}

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

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

            <!-- External Identifiers -->
            {% if compound.get_external_identifiers %}
                <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
                    <h4 class="panel-title">
                        <a id="compound-external-identifier-link" data-toggle="collapse" data-parent="#compound-detail"
                           href="#compound-external-identifier">External Identifier</a>
                    </h4>
                </div>
                <div id="compound-external-identifier" class="panel-collapse collapse in">
                    <div class="panel-body list-group-item">
                        {% if compound.get_pubchem_compound_identifiers %}
                            <div class="panel panel-default panel-heading list-group-item"
                                 style="background-color:silver">
                                <h4 class="panel-title">
                                    <a id="compound-pubchem-identifier-link" data-toggle="collapse"
                                       data-parent="#compound-external-identifier"
                                       href="#compound-pubchem-identifier">PubChem Compound Identifier</a>
                                </h4>
                            </div>
                            <div id="compound-pubchem-identifier" class="panel-collapse collapse in">
                                {% for eid in compound.get_pubchem_compound_identifiers %}
                                    <a class="list-group-item"
                                       href="{{ eid.external_url }}">CID{{ eid.identifier_value }}</a>
                                {% endfor %}
                            </div>
                        {% endif %}
                        {% if compound.get_pubchem_substance_identifiers %}
                            <div class="panel panel-default panel-heading list-group-item"
                                 style="background-color:silver">
                                <h4 class="panel-title">
                                    <a id="compound-pubchem-identifier-link" data-toggle="collapse"
                                       data-parent="#compound-external-identifier"
                                       href="#compound-pubchem-identifier">PubChem Substance Identifier</a>
                                </h4>
                            </div>
                            <div id="compound-pubchem-identifier" class="panel-collapse collapse in">
                                {% for eid in compound.get_pubchem_substance_identifiers %}
                                    <a class="list-group-item"
                                       href="{{ eid.external_url }}">SID{{ eid.identifier_value }}</a>
                                {% endfor %}
                            </div>
                        {% endif %}
                        {% if compound.get_chebi_identifiers %}
                            <div class="panel panel-default panel-heading list-group-item"
                                 style="background-color:silver">
                                <h4 class="panel-title">
                                    <a id="compound-chebi-identifier-link" data-toggle="collapse"
                                       data-parent="#compound-external-identifier"
                                       href="#compound-chebi-identifier">ChEBI Identifier</a>
                                </h4>
                            </div>
                            <div id="compound-chebi-identifier" class="panel-collapse collapse in">
                                {% for eid in compound.get_chebi_identifiers %}
                                    <a class="list-group-item"
                                       href="{{ eid.external_url }}">CHEBI:{{ eid.identifier_value }}</a>
                                {% endfor %}
                            </div>
                        {% endif %}
                    </div>
                </div>
            {% endif %}

        </div>

    </div>
{% endblock content %}