<!-- <div class="app-mainHeader">
    Role Management
    <button pButton type="button" label="Add Role" class="btn btn-primary"
        [routerLink]="['/UserConfiguration/RoleManagement/Add']"></button>
</div> -->
<div class="ng-card custom-shadow mb-0">
    <div class="ng-cardHead">
        <div class="ng-cardLabel">
          <h3 class="ng-cardTitle">Role Management</h3>
        </div>
        <button (click)="btnClick()" class="btn btn-primary"> Add Role</button>
    </div>
    <div class="ng-searchBody">
    <div class="row">
        <div class="col-lg-3"> 
            <div class="formControlWrapper">
                <label class="formLabel">Role Name</label>
                <input [(ngModel)]="role_name" class="formInput" type="text" />
            </div>
        </div>
        <div class="col-lg-3">
            <div class="formControlWrapper">
                <label class="formLabel">Decsription</label>
                <input [(ngModel)]="role_description" class="formInput" type="text" />
            </div>
        </div>
    </div>
</div>
    <div class="ng-searchFooter">
        <button pButton type="button" (click)="Reset()" label="Reset" class="btn-secondary btn mr-10"></button>
        <button pButton type="button" (click)="Search()" label="Search" class="btn-primary btn"></button>
    </div>
</div>
<div class="dataTable custom-shadow actionButtonSticky">
    <div class="app-seperator"></div>
    <div class="actionButtonSticky">
    <p-table #dt [value]="AllRole" [rows]="10" [columns]="cols" [resizableColumns]="true" [paginator]="true"
        [rowsPerPageOptions]="[10, 25, 50, 100]" responsiveLayout="scroll" styleClass="p-datatable-gridlines"
        [globalFilterFields]="[
'role_id',
'role_name',
'role_description',
'reporting_role_id',
'updated_by',
'is_active',
'role_type',
'affiliate_name',
'status'
]" [rowHover]="true" dataKey="id" currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
        [showCurrentPageReport]="true" [sortField]="'custom_updated_on'" [sortOrder]="-1">
        <ng-template pTemplate="caption">
            <p-toolbar>
                <ng-template pTemplate="left" *ngIf="commonServ.DownloadFilesAllowed">
                    <button type="button" (click)="dt.exportCSV()" class="btn btn-grey mr-2" pButton
                        class="btn-secondary mr-10" pTooltip="CSV" tooltipPosition="bottom">CSV</button>
                    <button type="button" (click)="commonServ.exportExcel(AllRole,cols,'User Role Management')" pButton
                        class="btn-secondary mr-10" pTooltip="XLS" tooltipPosition="bottom">Excel</button>
                    <button type="button" pButton (click)="commonServ.exportPdf(AllRole,cols,'User Role Management')"
                        class="btn-secondary mr-10" pTooltip="PDF" tooltipPosition="bottom">PDF</button>
                </ng-template>
                <ng-template pTemplate="right">
                    <div class="p-d-flex p-ai-center">
                        <span class="p-input-icon-left">
                            <i class="pi pi-search"></i>
                            <input pInputText type="search" #searchInp
                                (input)="dt.filterGlobal(searchInp.value, 'contains')" placeholder="Search" />
                        </span>
                    </div>
                </ng-template>
            </p-toolbar>
        </ng-template>
        <ng-template pTemplate="header">
            <tr>
                <th pSortableColumn="role_id"> Role Id <p-sortIcon field="role_id" class="p-sort-icon">
                    </p-sortIcon>
                </th>
                <th pSortableColumn="role_name"> Role Name <p-sortIcon field="role_name" class="p-sort-icon">
                    </p-sortIcon>
                </th>
                <th pSortableColumn="role_type"> Role Type <p-sortIcon field="role_type" class="p-sort-icon">
                    </p-sortIcon>
                </th>
                <th pSortableColumn="vendor_name">
                    Vendor
                    <p-sortIcon field="vendor_name" class="p-sort-icon"></p-sortIcon>
                </th>
                <th pSortableColumn="updated_by"> Updated By <p-sortIcon field="updated_by" class="p-sort-icon">
                    </p-sortIcon>
                </th>
                <th pSortableColumn="custom_updated_on"> Updated On <p-sortIcon field="custom_updated_on"
                        class="p-sort-icon">
                    </p-sortIcon>
                </th>
                <th pSortableColumn="status"> Status <p-sortIcon field="status" class="p-sort-icon">
                    </p-sortIcon>
                <th pSortableColumn="">
                    Action
                </th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-data>
            <tr>
                <td>{{data.role_id}}</td>
                <td>
                    {{data.role_name}}
                </td>
                <td>
                    {{data.role_type}}
                </td>
                <td>{{data.vendor_name}}</td>
                <td> {{data.updated_by}}</td>
                <td> {{data.Custom_updated_on }}</td>
                <td>
                    <span class="status"
                        [ngClass]="{'status-success':data.is_active,'status-failed':data.is_active == false}">
                        {{data.status}}
                    </span>
                </td>
                <td>
                    <div class="actionButton">
                        <button mat-icon-button [matMenuTriggerFor]="menu">
                            <span class="material-icons"> more_horiz </span>
                        </button>
                        <mat-menu #menu="matMenu">
                            <button mat-menu-item class="d-flex align-center" (click)="Edit(data.role_id)"> Edit
                            </button>
                            <button mat-menu-item class="d-flex align-center" *ngIf="commonServ.ChangeStatusAllowed"
                                (click)="UpdateStatus(data.role_id ,data.is_active)">
                                {{data.is_active ? 'Deactive' : 'Active'}}
                            </button>
                        </mat-menu>
                    </div>
                </td>
            </tr>
        </ng-template>
        <ng-template pTemplate="emptymessage">
            <tr *ngIf="AllRole === null || AllRole" class="resultNotFound">
                <td> No data found </td>
            </tr>
        </ng-template>
    </p-table>
</div>
</div>

<p-toast></p-toast>