<section class="content-header">
    <h1>
        Collections
        <small>control what you share</small>
    </h1>
</section>
<section class="content">
    <div class="box">
        <div class="box-header with-border">
            &nbsp;
            <div class="box-filters hidden-xs">
                <div class="form-group form-group-sm has-feedback has-feedback-left">
                    <input type="text" id="filterSearch" class="form-control" placeholder="Search collections..."
                           style="width: 200px;" ng-model="filterSearch">
                    <span class="fa fa-search form-control-feedback text-muted" aria-hidden="true"></span>
                </div>
            </div>
            <div class="box-tools">
                <button type="button" class="btn btn-primary btn-sm btn-flat" ng-click="add()">
                    <i class="fa fa-fw fa-plus-circle"></i> New Collection
                </button>
            </div>
        </div>
        <div class="box-body" ng-class="{'no-padding': filteredCollections.length}">
            <div ng-show="loading && !collections.length">
                Loading...
            </div>
            <div ng-show="!filteredCollections.length && filterSearch">
                No collections to list.
            </div>
            <div ng-show="!loading && !collections.length">
                <p>There are no collections yet for your organization.</p>
                <button type="button" ng-click="add()" class="btn btn-default btn-flat">Add a Collection</button>
            </div>
            <div class="table-responsive" ng-show="collections.length">
                <table class="table table-striped table-hover table-vmiddle">
                    <tbody>
                        <tr ng-repeat="collection in filteredCollections = (collections | filter: (filterSearch || '') |
                            orderBy: ['name']) track by collection.id">
                            <td style="width: 70px;">
                                <div class="btn-group" data-append-to="body">
                                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                        <i class="fa fa-cog"></i> <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu">
                                        <li>
                                            <a href="#" stop-click ng-click="users(collection)">
                                                <i class="fa fa-fw fa-users"></i> Users
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#" stop-click ng-click="delete(collection)" class="text-red">
                                                <i class="fa fa-fw fa-trash"></i> Delete
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </td>
                            <td valign="middle">
                                <a href="#" stop-click ng-click="edit(collection)">
                                    {{collection.name}}
                                </a>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</section>