<!-- <div class="app-mainHeader">
    User Management
    <button pButton type="button" label="Add User" class="btn btn-primary"
        [routerLink]="['/UserConfiguration/UserManagement/Add']"></button>
</div> -->
<div class="ng-card custom-shadow mb-0">
    <div class="ng-cardHead">
        <div class="ng-cardLabel">
          <h3 class="ng-cardTitle">User Management</h3>
        </div>
        <button (click)="btnClick()" class="btn btn-primary"> Add User</button>
    </div>
    <div class="ng-searchBody">
    <div class="row">
        <div class="col-lg-3">
            <div class="formControlWrapper">
                <label class="formLabel">User Name</label>
                <input [(ngModel)]="user_name" class="formInput" type="text" />
            </div>
        </div>
        <div class="col-lg-3">
            <div class="formControlWrapper">
                <label class="formLabel">Email Id</label>
                <input [(ngModel)]="user_email" class="formInput" type="text" />
            </div>
        </div>
    </div>
</div>
    <div class="ng-searchFooter">
        <button pButton type="button" label="Reset" (click)="Reset()" class="btn btn-secondary mr-10"></button>
        <button pButton type="button" label="Search" (click)="Search()" class="btn btn-primary"></button>
    </div>
</div>
<div class="dataTable custom-shadow actionButtonSticky">
    <div class="app-seperator"></div>
    <div class="actionButtonSticky">
    <p-table #dt [value]="AllExtranetUser" [rows]="10" [sortField]="'updated_on'" [sortOrder]="-1" [columns]="cols"
        [resizableColumns]="true" [paginator]="true" [rowsPerPageOptions]="[10, 25, 50, 100]" responsiveLayout="scroll"
        styleClass="p-datatable-gridlines" [globalFilterFields]="[
        'user_id',
        'first_name',
        'email',
        'vendor_name',
        'role_name',
        'user_role',
        'updated_by',
        'updated_on',
        'status',
]" [rowHover]="true" dataKey="id" currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
        [showCurrentPageReport]="true">
        <ng-template pTemplate="caption">
            <p-toolbar *ngIf="AllExtranetUser && AllExtranetUser.length > 0">
                <ng-template pTemplate="left" *ngIf="commonserv.DownloadFilesAllowed">
                    <button type="button" pButton class="btn-secondary mr-10" pTooltip="CSV" tooltipPosition="bottom"
                        (click)="dt.exportCSV()">CSV</button>
                    <button type="button" pButton class="btn-secondary mr-10" pTooltip="XLS" tooltipPosition="bottom"
                        (click)="commonserv.exportExcel(AllExtranetUser,cols,'Extranet User')">Excel</button>
                    <button type="button" pButton class="btn-secondary mr-10" pTooltip="PDF" tooltipPosition="bottom"
                        (click)="commonserv.exportPdf(AllExtranetUser,cols,'Extranet User')">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="user_id"> User Id <p-sortIcon field="user_id" class="p-sort-icon"></p-sortIcon>
                </th>
                <th pSortableColumn="first_name"> Name <p-sortIcon field="first_name" class="p-sort-icon"></p-sortIcon>
                </th>
                <th pSortableColumn="email"> Email Id <p-sortIcon field="email" 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="role_name"> User Role <p-sortIcon field="role_name"
                        class="p-sort-icon"></p-sortIcon>
                </th>
                <th pSortableColumn="user_role"> User Type <p-sortIcon field="user_role"
                        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="updated_on"> Updated On <p-sortIcon field="updated_on"
                        class="p-sort-icon"></p-sortIcon>
                </th>
                <th pSortableColumn="status"> Status <p-sortIcon field="status" class="p-sort-icon"></p-sortIcon>
                </th>
                <th>Action</th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-data>
            <tr>
                <td>{{data.user_id}}</td>
                <td>{{data.first_name}}</td>
                <td>{{data.email}}</td>
                <td>{{data.vendor_name}}</td>
                <td>{{data.role_name}}</td>
                <td>{{data.user_role}}</td>
                <td>{{data.updated_by}}</td>
                <td>{{data.custom_updated_on}}</td>
                <td>
                    <span class="status"
                        [ngClass]="{'booking-history-status-success':data.is_active,'booking-history-status-fail':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 (click)="edit(data.user_id)">
                                Edit </button>
                            <button mat-menu-item *ngIf="commonserv.ChangeStatusAllowed"
                             (click)="UpdateStatus(data.user_id,data.is_active)">{{
                                data.is_active ? 'Deactive' :'Active'}} </button>
                        </mat-menu>
                    </div>
                </td>
            </tr>
        </ng-template>
        <ng-template pTemplate="emptymessage">
            <tr *ngIf="AllExtranetUser === null || AllExtranetUser" class="resultNotFound">
                <td> No data found </td>
            </tr>
        </ng-template>
    </p-table>
</div>
</div>

<p-toast></p-toast>