<div layout>
    <md-content flex layout-padding>
        <md-card>
        <!--<h3>Cohorts</h3>-->

        <!--<p>Define a cohort to identify the patient population in your datasets.-->
        <!--</p>-->
        <!--<a ui-sref="newCohort" class="btn btn-primary"><span-->
                <!--class="glyphicon glyphicon-plus-sign"></span>Define New Cohort-->
        <!--</a>-->
        <!--<table class="table table-responsive vert-offset">-->
            <!--<tr>-->
                <!--<th>Action</th>-->
                <!--<th>Name</th>-->
                <!--<th>Description</th>-->
                <!--<th>Created Date</th>-->
                <!--<th>Last Modified</th>-->
            <!--</tr>-->
            <!--<tr ng-repeat="cohortDestination in cohorts.list">-->
                <!--<td>-->
                    <!--<a ui-sref="editCohort({key: cohortDestination.name})" title="Edit">-->
                        <!--<span class="glyphicon glyphicon-pencil edit-icon" title="Edit"></span>-->
                    <!--</a>-->
                    <!--<span class="glyphicon glyphicon-remove delete-icon" title="Delete" ng-click="remove(cohortDestination.name)"></span>-->
                <!--</td>-->
                <!--<td>{{ cohortDestination.name }}</td>-->
                <!--<td>{{ cohortDestination.description }}</td>-->
                <!--<td>{{ cohortDestination.created_at | date : shortDate }}</td>-->
                <!--<td>{{ cohortDestination.updated_at | date : shortDate }}</td>-->
            <!--</tr>-->
        <!--</table>-->

        <!-- begin md-data-table -->
        <md-data-table-toolbar ng-hide="cohorts.selected.length || cohorts.filter.show">
            <h2 class="md-title">Cohorts</h2>
            <div flex></div>
            <md-button class="md-icon-button" ng-click="cohorts.filter.show = true">
                <i class="material-icons md-dark">search</i>
            </md-button>
            <md-button class="md-icon-button" ui-sref="newCohort">
                <i class="material-icons md-dark">add_circle</i>
            </md-button>
        </md-data-table-toolbar>

        <md-data-table-toolbar ng-show="cohorts.filter.show && !cohorts.selected.length">
            <i class="material-icons md-dark">search</i>
            <form flex name="cohorts.filter.form">
                <input type="text" ng-model="cohorts.query.filter" ng-model-options="cohorts.filter.options" placeholder="Search...">
            </form>
            <md-button class="md-icon-button" ng-click="cohorts.removeFilter()">
                <i class="material-icons md-dark">close</i>
            </md-button>
        </md-data-table-toolbar>

        <md-data-table-toolbar class="alternate" ng-show="cohorts.selected.length" layout-align="space-between">
            <div>{{cohorts.selected.length}} {{cohorts.selected.length > 1 ? 'items' : 'item'}} selected</div>
            <div flex></div>
            <md-button class="md-icon-button" ng-show="cohorts.selected.length == 1" ui-sref="editCohort({ key: cohorts.selected[0].key })">
                <i class="material-icons md-dark">edit</i>
            </md-button>
            <md-button class="md-icon-button">
                <i class="material-icons md-dark">delete</i>
            </md-button>
        </md-data-table-toolbar>

        <md-data-table-container>
            <table md-data-table md-row-select="cohorts.selected" md-progress="cohorts.deferred">
                <thead md-order="cohorts.query.order" md-trigger="cohorts.onOrderChange">
                    <tr>
                        <th name="Name" order-by="name"></th>
                        <th name="Description" order-by="description"></th>
                        <th name="Created" unit="date" order-by="created_at"></th>
                        <th name="Last Modified" unit="date" order-by="updated_at"></th>
                    </tr>
                </thead>
                <tbody>
                    <tr md-auto-select ng-repeat="cohort in cohorts.cohortsList">
                        <td>{{cohort.name}}</td>
                        <td>{{cohort.description}}</td>
                        <td>{{cohort.created_at | date:'shortDate'}}</td>
                        <td>{{cohort.updated_at | date:'shortDate'}}</td>
                    </tr>
                </tbody>
            </table>
        </md-data-table-container>

        <md-data-table-pagination md-limit="cohorts.query.limit" md-page="cohorts.query.page" md-total="{{cohorts.cohortsList.length}}" md-trigger="cohorts.onPaginationChange"></md-data-table-pagination>
        <!-- end md-data-table -->

        </md-card>
    </md-content>
</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="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>-->
<!--<script language="JavaScript">-->

    <!--$('span.delete-icon').on('click', function () {-->
        <!--var $tr = $(this).closest('tr');-->
        <!--var displayName = $tr.data('display-name');-->
        <!--var key = $tr.data('key');-->
        <!--var dialog = $('#deleteModal');-->
        <!--$(dialog).find('#deleteContent').html('Are you sure you want to remove cohort &quot;' + displayName.trim() + '&quot;?');-->
        <!--$(dialog).find('#deleteButton').on('click', function (e) {-->
            <!--$(dialog).modal('hide');-->
            <!--$.ajax({-->
                <!--type: "DELETE",-->
                <!--//url: 'deletecohort?key=' + encodeURIComponent(key),-->
                <!--url: '/eureka-webapp/proxy-resource/destinations/' + encodeURIComponent(key),-->
                <!--success: function (data) {-->
                    <!--window.location.href = '#/cohort_home'-->
                <!--},-->
                <!--error: function (data, statusCode, errorThrown) {-->
                    <!--var content = 'Error while deleting &quot;' + displayName.trim() + '&quot;. ' + data.responseText + '. Status Code: ' + statusCode;-->
                    <!--$('#errorModal').find('#errorContent').html(content);-->
                    <!--$('#errorModal').modal('show');-->
                    <!--if (errorThrown != null) {-->
                        <!--console.log(errorThrown);-->
                    <!--}-->
                <!--}-->
            <!--});-->
        <!--});-->
        <!--$(dialog).modal("show");-->
    <!--});-->
<!--</script>-->