<div class="container">

    <div class="row" ng-if="list.loadingPolicies">
        <moon-loader ng-if="list.loadingPolicies"></moon-loader>
    </div>

    <div class="row" ng-if="!list.loadingPolicies" >

        <div class="table-responsive" data-role="table">

            <table  class="table table-striped table-hover" ng-table="list.table">

                <colgroup>
                    <col class="col-md-4" />
                    <col class="col-md-2" />
                    <col class="col-md-2" />
                    <col class="col-md-1" />
                </colgroup>

                <thead>

                    <tr>

                        <th class="customTables sortable"
                            ng-class="{ 'sort-asc': list.table.isSortBy('name', 'asc'), 'sort-desc': list.table.isSortBy('name', 'desc') }"
                            ng-click="list.table.sorting('name', list.table.isSortBy('name', 'asc') ? 'desc' : 'asc')">
                            <div data-translate="moon.policy.list.table.name">Name</div>
                        </th>

                        <th class="customTables sortable"
                            ng-class="{ 'sort-asc': list.table.isSortBy('genre', 'asc'), 'sort-desc': list.table.isSortBy('genre', 'desc') }"
                            ng-click="list.table.sorting('genre', list.table.isSortBy('genre', 'asc') ? 'desc' : 'asc')">
                            <div data-translate="moon.policy.list.table.genre">Genre</div>
                        </th>

                        <th class="customTables sortable"
                            ng-class="{ 'sort-asc': list.table.isSortBy('description', 'asc'), 'sort-desc': list.table.isSortBy('description', 'desc') }"
                            ng-click="list.table.sorting('description', list.table.isSortBy('description', 'asc') ? 'desc' : 'asc')">
                            <div data-translate="moon.policy.list.table.description">Description</div>
                        </th>

                        <th class="customTables sortable">
                            <div data-translate="moon.policy.list.action.title">Actions</div>
                        </th>
                    </tr>

                </thead>

                <tbody ng-if="!list.hasPolicies()">
                    <tr>
                        <td colspan="12"><span data-translate="moon.policy.list.table.notFound">There is no policy</span></td>
                    </tr>
                </tbody>

                <tbody ng-if="list.hasPolicies()">

                    <tr ng-repeat="policy in $data | filter:list.search.find | orderBy:sort:reverse">
                        <td ng-bind="policy.name"></td>
                        <td ng-bind="policy.genre"></td>
                        <td ng-bind="policy.description"></td>
                        <td>
                            <a href="" ng-click="list.unmap.showModal(policy)">
                                <span class="glyphicon glyphicon-transfer"></span>
                                <em data-translate="moon.policy.list.action.unmap">Unmap</em>
                            </a>
                        </td>
                    </tr>

                </tbody>

            </table>

        </div>

        <div class="container">

            <div class="form-inline form-group">
                <a href="" ng-click="list.map.showModal()" class="btn btn-default">
                    <span class="glyphicon glyphicon-link"></span>
                    <em data-translate="moon.policy.list.action.map">Map a Policy to PDP</em>
                </a>
            </div>

        </div>

    </div>

</div>