<legend>{{'FRONT_TITLE' | translate}}</legend>
<button class="btn" data-ng-click="modal('front')">{{'FRONT_ADD' | translate}}</button>
<table class="table table-striped system-table">
    <thead>
    <tr>
        <th style="width: 15%;">{{'NAME' | translate}}
        <th style="width: 20%;">{{'TITLE' | translate}}
        <th style="width: 15%;" class="text-center">{{'ACTIVATED' | translate}}
        <th>{{'ACTION' | translate}}
    <tbody>
    <tr ng-repeat="role in roles | filter: {section: 'front'}">
        <td>{{role.name}}
        <td>
            <div pi-hover-input="role" text="role.title"></div>
        <td class="text-center">
            <div class="pi-status" data-ng-class="{'active': role.active, 'disabled': !role.custom}"
                 data-ng-click="activeAction(role)">
                <div class="pi-status-director"></div>
            </div>
        <td>
            <button class="btn btn-link" data-ng-if="role.custom"
                    data-ng-click="deleteAction(role)">
                {{'DELETE' | translate}}
            </button>
</table>
<legend>{{'ADMIN_TITLE' | translate}}</legend>
<button class="btn" data-ng-click="modal('admin')">{{'ADMIN_ADD' | translate}}</button>
<table class="table table-striped system-table">
    <thead>
    <tr>
        <th style="width: 15%;">{{'NAME' | translate}}
        <th style="width: 20%;">{{'TITLE' | translate}}
        <th style="width: 15%;" class="text-center">{{'ACTIVATED' | translate}}
        <th>{{'ACTION' | translate}}
    <tbody>
    <tr ng-repeat="role in roles | filter: {section: 'admin'}">
        <td>{{role.name}}
        <td>
            <div pi-hover-input="role" text="role.title"></div>
        <td class="text-center">
            <div class="pi-status" data-ng-class="{'active': role.active, 'disabled': !role.custom}"
                 data-ng-click="activeAction(role)">
                <div class="pi-status-director"></div>
            </div>
        <td>
            <button class="btn btn-link" data-ng-if="role.custom"
                    data-ng-click="deleteAction(role)">
                {{'DELETE' | translate}}
            </button>
</table>
<div class="modal" data-ng-if="entity" style="width: 600px; margin-left: -300px;">
    <form name="roleForm" ng-submit="addRoleAction()"
          style="margin-bottom: 0;" id="popup-form" novalidate>
        <div class="modal-header">
            <h3>{{'ROLE_ADD' | translate}}</h3>
            <button type="button" class="close" data-ng-click="cancelModal()">&times;</button>
        </div>
        <div class="modal-body">
            <div class="control-group"
                 data-ng-class="{'error': roleForm.name.$dirty && roleForm.name.$invalid}">
                <label class="col-form-label">{{'ROLE_NAME' | translate}}</label>
                <div class="controls">
                    <input type="text" data-ng-model="entity.name" name="name" required pi-unique="{{uniqueUrl}}">
                    <span class="help-inline" data-ng-show="roleForm.name.$valid">
            <i class="icon-ok text-success"></i>
          </span>
                    <span class="help-inline"
                          data-ng-show="roleForm.name.$error.required">
            {{'REQUIRED' | translate}}
          </span>
                    <span class="help-inline"
                          data-ng-show="roleForm.name.$error.unique">
            {{'ROLE_NAME_TOKEN' | translate}}
          </span>
                </div>
            </div>
            <div class="control-group"
                 data-ng-class="{'error': roleForm.title.$dirty && roleForm.title.$invalid}">
                <label class="col-form-label">{{'ROLE_TITLE' | translate}}</label>
                <div class="controls">
                    <input type="text" data-ng-model="entity.title" name="title" required>
                    <span class="help-inline" data-ng-show="roleForm.title.$valid">
            <i class="icon-ok text-success"></i>
          </span>
                    <span class="help-inline"
                          data-ng-show="roleForm.title.$error.required">
            {{'REQUIRED' | translate}}
          </span>
                </div>
            </div>
            <div class="control-group">
                <label class="col-form-label">{{'TYPE' | translate}}</label>
                <div class="controls">
                    <select data-ng-model="entity.section">
                        <option value="front">{{'FRONT' | translate}}</option>
                        <option value="admin">{{'ADMIN' | translate}}</option>
                    </select>
                </div>
            </div>
            <div class="control-group">
                <label class="col-form-label">{{'STATUS' | translate}}</label>
                <div class="controls">
                    <div class="btn-group">
              <span class="btn" data-ng-class="{'btn-danger active': !entity.active}"
                    data-ng-click=" entity.active = 0">
                  {{'INACTIVE' | translate}}
              </span>
                        <span class="btn" data-ng-class="{'btn-success active': entity.active}"
                              data-ng-click=" entity.active = 1">
                  {{'ACTIVE' | translate}}
              </span>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <input class="btn btn-primary" type="submit"
                   ng-disabled="roleForm.$invalid" value="{{'SUBMIT' | translate}}">
        </div>
    </form>
</div>
<div class="modal-backdrop fade in" data-ng-if="entity" data-ng-click="cancelModal()">
</div>