<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<jsp:include page="/WEB-INF/jsp/header.jsp"/>

<script>
    $(function() {
        $("#compositions").tabs();
    });
</script>
<div id="compositions" class="tabs">
    <ul>
        <li><a href="#combinedStructure">Combined Structure</a></li>
    <c:forEach items="${compound.getCompositions()}" var="composition" varStatus="row">
        <li><a href="<c:url value="/composition/${composition.getId()}"/>">Composition ${row.index + 1}</a></li>
    </c:forEach>
    </ul>
    <div id="combinedStructure">
        <img src="<c:url value="/compound/${compound.getId()}/render?width=500&height=300"/>"/>
    </div>
</div>
<div class="cssform">
    <div>
        <label>Compound Name</label>
        <input type="text" readonly value="${compound.getCompoundName()}"/>
    </div>
    <div>
        <label>CAS</label>
        <input type="text" readonly value="${compound.getCas()}"/>
    </div>
    <div>
        <label>Description</label>
        <input type="text" readonly value="${compound.getCompoundDescription()}"/>
    </div>
</div>
<div id="editLink" class="formLink"><a href="/MDFSimpleWebApp/compound/${compound.getId()}/edit">Edit Compound</a></div>
<div id="addLink" class="formLink"><a href="/MDFSimpleWebApp/composition/add/${compound.getId()}">Add Composition</a></div>
<jsp:include page="/WEB-INF/jsp/footer.jsp"/>
