{% extends "framework.html" %}

{% block content %}

{% block action_modals %}
{% include "modals/objects/edit_compound_modal.html" %}
{% include "modals/objects/delete_compound_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 }}
            <div id="actionsButton"
                 style="float: right;font-weight: normal;font-size: medium;position: relative; top: 50%; transform: translateY(-50%);z-index:100;"
                 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>

        <!-- 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 }}
            </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>

        <!-- SMILES -->
        <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 -->

        <!-- Pathways -->

        <!-- External Identifiers -->

    </div>

</div>
{% endblock content %}