<div>
    <div class="panel panel-default">

        <div class="panel-heading">

            <h4 data-translate="moon.policy.perimeter.subject.title">List of associated Subjects</h4>

        </div>

        <div class="panel-body">

            <div class="table-responsive">

                <table class="table table-striped">

                    <thead>
                        <tr>
                            <th data-translate="moon.policy.perimeter.table.name">Name</th>
                            <th data-translate="moon.policy.perimeter.table.description">Description</th>
                            <th data-translate="moon.policy.perimeter.table.email">Email</th>
                            <th data-translate="moon.policy.perimeter.table.action.title"></th>
                        </tr>
                    </thead>

                    <moon-loader ng-if="list.loadingSub"></moon-loader>

                    <tbody ng-if="!list.loadingSub && list.getSubjects().length > 0">
                    <tr ng-repeat="(key, value) in list.subjects">
                        <td ng-bind="value.name"></td>
                        <td ng-bind="value.description"></td>
                        <td ng-bind="value.email"></td>
                        <td>

                            <a href="" ng-if="!value.loader" ng-click="list.unMapSub(value)" >
                                <span class="glyphicon glyphicon-transfer"></span>
                                <span class="control-label" data-translate="moon.policy.perimeter.table.action.unmap">Unmap</span>
                            </a>

                            <div ng-if="value.loader">

                                <moon-loader></moon-loader>

                            </div>

                        </td>

                    </tr>
                    </tbody>


                    <tbody ng-if="!list.loadingSub && list.getSubjects().length === 0">
                    <tr>
                        <td data-translate="moon.policy.perimeter.subject.notFound">There is no Subjects</td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    </tbody>

                </table>

            </div>

        </div>

    </div>

    <div ng-if="list.editMode" class="panel panel-default">

        <div class="panel-heading">

            <h4 data-translate="moon.policy.perimeter.subject.add.title">Add a Subject Category</h4>

        </div>

        <div class="panel-body">

            <moon-perimeter-edit policy="list.policy" perimeter-type="list.typeOfSubject"></moon-perimeter-edit>

        </div>

    </div>


    <div class="panel panel-default">

        <div class="panel-heading">

            <h4 data-translate="moon.policy.perimeter.object.title">List associated of Objects</h4>

        </div>

        <div class="panel-body">

            <div class="table-responsive">

                <table class="table table-striped">

                    <thead>
                        <tr>
                            <th data-translate="moon.policy.perimeter.table.name">Name</th>
                            <th data-translate="moon.policy.perimeter.table.description">Description</th>
                            <th data-translate="moon.policy.perimeter.table.action.title"></th>
                        </tr>
                    </thead>

                    <moon-loader ng-if="list.loadingObj"></moon-loader>

                    <tbody ng-if="!list.loadingObj && list.getObjects().length > 0">
                    <tr ng-repeat="(key, value) in list.objects">
                        <td ng-bind="value.name"></td>
                        <td ng-bind="value.description"></td>
                        <td>

                            <a href="" ng-if="!value.loader" ng-click="list.unMapObj(value)" >
                                <span class="glyphicon glyphicon-transfer"></span>
                                <span class="control-label" data-translate="moon.policy.perimeter.table.action.unmap">Unmap</span>
                            </a>

                            <div ng-if="value.loader">

                                <moon-loader></moon-loader>

                            </div>

                        </td>
                    </tr>
                    </tbody>

                    <tbody ng-if="!list.loadingObj && list.getObjects().length === 0">
                    <tr>
                        <td data-translate="moon.policy.perimeter.object.notFound">There is no Objects</td>
                        <td></td>
                        <td></td>
                    </tr>
                    </tbody>

                </table>

            </div>

        </div>

    </div>

    <div ng-if="list.editMode" class="panel panel-default">

        <div class="panel-heading">

            <h4 data-translate="moon.policy.perimeter.object.add.title">Add an Object Category</h4>

        </div>

        <div class="panel-body">

            <moon-perimeter-edit policy="list.policy" perimeter-type="list.typeOfObject"></moon-perimeter-edit>

        </div>

    </div>

    <div class="panel panel-default">

        <div class="panel-heading">

            <h4 data-translate="moon.policy.perimeter.action.title">List associated of Actions</h4>

        </div>

        <div class="panel-body">

            <div class="table-responsive">

                <table class="table table-striped">

                    <thead>
                        <tr>
                            <th data-translate="moon.policy.perimeter.table.name">Name</th>
                            <th data-translate="moon.policy.perimeter.table.description">Description</th>
                            <th data-translate="moon.policy.perimeter.table.action.title"></th>
                        </tr>
                    </thead>

                    <moon-loader ng-if="list.loadingAct"></moon-loader>

                    <tbody ng-if="!list.loadingAct && list.getActions().length > 0">
                    <tr ng-repeat="(key, value) in list.actions">
                        <td ng-bind="value.name"></td>
                        <td ng-bind="value.description"></td>
                        <td>

                            <a href="" ng-if="!value.loader" ng-click="list.unMapAct(value)" >
                                <span class="glyphicon glyphicon-transfer"></span>
                                <span class="control-label" data-translate="moon.policy.perimeter.table.action.unmap">Unmap</span>
                            </a>

                            <div ng-if="value.loader">

                                <moon-loader></moon-loader>

                            </div>

                        </td>
                    </tr>
                    </tbody>

                    <tbody ng-if="!list.loadingAct && list.getActions().length === 0">
                    <tr>
                        <td data-translate="moon.policy.perimeter.action.notFound">There is no Actions</td>
                        <td></td>
                        <td></td>
                    </tr>
                    </tbody>

                </table>

            </div>


        </div>

    </div>

    <div ng-if="list.editMode" class="panel panel-default">

        <div class="panel-heading">

            <h4 data-translate="moon.policy.perimeter.action.add.title">Add an Action Category</h4>

        </div>

        <div class="panel-body">.

            <moon-perimeter-edit policy="list.policy" perimeter-type="list.typeOfAction"></moon-perimeter-edit>

        </div>

    </div>

</div>