<div class="row">
    <label *ngIf="!successResp" for="assessment" class="modal-err-msg">{{errMsg}}</label>
</div>
<section>
    <div *ngIf="!isRoleEdit">
        <div class="role_content" *ngIf="!rolDiv">
            <img src="{{imageUrl}}/assets/img/admin/ion-ios-plus.png" alt='add' (click)="addRoleUi()">
        </div>
        <div *ngIf="rolDiv">
            <div class="col-lg-10 col-md-10 col-sm-10 col-xs-10">
                <div class="role_content_div" [style.borderBottomColor]="mycolor">
                    {{roles.roleName}}
                </div>
            </div>
            <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 iconClick">
                <div class="pull-left" *ngIf="othIcons">
                    <mat-icon (click)="deleteTheRole(roles.roleId, roles)">delete</mat-icon>
                    <mat-icon (click)="editTheRole(roles.roleId, roles)"> edit</mat-icon>
                </div>
                <div class="pull-left iconClick" (click)="showTheOtherIcons(roles.roleId.id)" *ngIf="!othIcons">
                    <mat-icon>
                        more_vert
                    </mat-icon>
                </div>
            </div>
        </div>
    </div>
    <div *ngIf="isRoleEdit">
        <div class="row">
            <input type="text" placeholder="Enter role name" required [(ngModel)]="roles.roleName">
        </div>
        <div class="row">
            <button class="btn btn-play-cancel" (click)="cancelRoleForm()">CANCEL</button>
            <button *ngIf="!addNewRoleBtn" class="btn btn-play-create" (click)="updateRoleDet(roles.roleId, roles)">SAVE</button>
            <button *ngIf="addNewRoleBtn" class="btn btn-play-create" (click)="addNewRoleDet(roles.roleName)">ADD</button>
        </div>
    </div>
</section>