<h3>Cohort Editor</h3>
<p>
    Select the system and user-defined elements from the ontology that will define the patient cohort.
</p>
<div class = "row" >
    <div class="col-xs-4" ng-controller="TabController as tab">

        <ul class="nav nav-tabs">
            <li ng-class="{active:tab.isSet(1)}">
                <!--<a href = "#systemElems" data-toggle="tab">System</a>-->
                <a href ng-click="tab.setTab(1)" >System</a>
            </li>
            <li ng-class="{active:tab.isSet(2)}">
                <a href ng-click="tab.setTab(2)" >User</a>
            </li>
        </ul>
        <div id="treeContent" class="tab-content proposition-tree">
            <!--<div id="systemElems" class="tab-pane fade active in" ng-show="tab.isSet(1)">-->
            <div id="systemElems" ng-show="tab.isSet(1)">
                <div id="systemTree">
                </div>
                <div id="searchUpdateDiv" class="searchUpdateMessage"></div>
            </div>
            <!--<div id="userElems" class="tab-pane fade" ng-show="tab.isSet(2)">-->
            <div id="userElems" ng-show="tab.isSet(2)">
                <div id="userTree"></div>
            </div>
        </div>
    </div>
    <div id="definitionContainer" class="col-xs-8">
        <form id="categorizationForm" class="vert-offset" role="form">
            <div class="form-group">
                <label for="patCohortDefName" class="control-label">Name</label>
                <input type="text" id="patCohortDefName" ng-model="cohortEditController.cohortDestination.name"
                       class="form-control"/>
            </div>
            <div class="form-group">
                <label for="patCohortDescription" class="control-label">Description</label>
                <textarea id="patCohortDescription" class="form-control" ng-model="cohortEditController.cohortDestination.description"></textarea>
            </div>
            <div class="form-group">
                <label for="patCohortDefinition" class="control-label">Members</label>
                <div id="patCohortDefinition"
                     class="jstree-drop tree-drop tree-drop-multiple"
                     title="Drop the system and/or user-defined data element members that define your patient cohort in here">
                    <ul class="sortable" data-drop-type="multiple" data-proptype="empty">
                    </ul>
                </div>
            </div>
            <div class="form-group text-center vert-offset">
                <button id="savePropositionButton" type="button" class="btn btn-primary">Save</button>
            </div>
        </form>
    </div>
</div>
<div id="deleteModal" class="modal fade" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 id="deleteModalLabel" class="modal-title">Delete Element</h4>
            </div>
            <div id="deleteContent" class="modal-body">
            </div>
            <div class="modal-footer">
                <button id="deleteButton" type="button" class="btn btn-primary">Delete</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<div id="replaceModal" class="modal fade" role="dialog" aria-labelledby="replaceModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 id="replaceModalLabel" class="modal-title">Replace Element</h4>
            </div>
            <div id="replaceContent" class="modal-body">
            </div>
            <div class="modal-footer">
                <button id="replaceButton" type="button" class="btn btn-primary">Replace</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<div id="errorModal" class="modal fade" role="dialog" aria-labelledby="errorModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 id="errorModalLabel" class="modal-title">Error</h4>
            </div>
            <div id="errorContent" class="modal-body">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<div id="searchModal" class="modal fade" role="dialog" aria-labelledby="searchModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 id="searchModalLabel" class="modal-title">
                    Broad Search Update
                </h4>
            </div>
            <div id="searchContent" class="modal-body">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<div id="searchValidationModal" class="modal fade" role="dialog" aria-labelledby="searchModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 id="searchModalLabel" class="modal-title">
                    Search String Validation Failed
                </h4>
            </div>
            <div id="searchContent" class="modal-body">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<div id="searchNoResultsModal" class="modal fade" role="dialog" aria-labelledby="searchModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 id="searchModalLabel" class="modal-title">
                    No Search Results
                </h4>
            </div>
            <div id="searchContent" class="modal-body">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<script language="JavaScript">
    eureka.editor.setup(null,
            '#systemTree', '#userTree', '#definitionContainer', '#savePropositionButton', 'span.delete-icon',
            'ul.sortable', 'assets/css/jstree-themes/default/style.css', '#searchModal',
            '#searchValidationModal','#searchNoResultsModal','#searchUpdateDiv');
</script>
<!--
<script language="JavaScript"
        src="${pageContext.request.contextPath}/assets/js/jquery.jstree.js"></script>
<script language="JavaScript"
        src="${pageContext.request.contextPath}/assets/js/eureka.tree${initParam['eureka-build-timestamp']}.js"></script>
<script language="JavaScript"
        src="${pageContext.request.contextPath}/assets/js/eureka.cohort${initParam['eureka-build-timestamp']}.js"></script>
<script language="JavaScript">
    eureka.editor.setup(${destId != null ? destId : 'null'},
            '#systemTree', '#userTree', '#definitionContainer', '#savePropositionButton', 'span.delete-icon',
            'ul.sortable', '${pageContext.request.contextPath}/assets/css/jstree-themes/default/style.css', '#searchModal',
            '#searchValidationModal','#searchNoResultsModal','#searchUpdateDiv');
</script>
-->
