<title>Service Employment Type</title>

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-6">
            <app-breadcrumb [title]="'Service Employment Types'" [active_item]="'Service Employment Types'">
            </app-breadcrumb>
        </div>
        <div class="col-sm-6">
            <div ngbDropdown class="btn-group">
                <div class="ml-2">

                </div>
            </div>
        </div>
        <div class="col-sm-12">
            <mat-drawer-container autosize>
                <div class="card">
                    <ng-container *ngIf="services && services.length > 0 else NoEmploymentTypes">
                        <div class="contentcard table-responsive userlist-table">
                            <table mat-table [dataSource]="services"
                                class=" employmentTable mat-elevation-z8 table-striped table-vcenter" aria-label="">
                                <ng-container matColumnDef="id">
                                    <th mat-header-cell *matHeaderCellDef style="width:75px">#</th>
                                    <td mat-cell *matCellDef="let element; let i = index;" style="width:75px">
                                        {{i+1}}
                                    </td>
                                </ng-container>
                                <ng-container matColumnDef="serviceName">
                                    <th mat-header-cell *matHeaderCellDef>{{'lbl_service_name'| translate}}</th>
                                    <td mat-cell *matCellDef="let element">
                                        <div *ngIf="element.name else NoValue">
                                            {{element.name}}
                                        </div>
                                        <ng-template #NoValue>
                                            --
                                        </ng-template>
                                    </td>
                                </ng-container>
                                <ng-container matColumnDef="action">
                                    <th mat-header-cell *matHeaderCellDef class="text-right">{{'lbl_action'| translate}}
                                    </th>
                                    <td mat-cell *matCellDef="let element" class="text-right">
                                        <a *ngIf="isWritePermission"
                                            title="{{ 'service_employment_type_tooltip_add_edit_employment_type' |translate}}"
                                            href="javascript:;" class="btn btn-sm btn-info filterbtn"
                                            (click)="modalOpen(element,basicmodal,false)">
                                            <i class="icon-plus"></i>
                                        </a>
                                        <a *ngIf="isReadPermission"
                                            title="{{ 'service_employment_type_tooltip_view_employment_type' |translate}}"
                                            href="javascript:;" class="btn btn-sm btn-info filterbtn"
                                            (click)="modalOpen(element,basicmodal,true)">
                                            <i class="icon-eye"></i>
                                        </a>
                                    </td>
                                </ng-container>
                                <tr mat-header-row *matHeaderRowDef="displayColumns; sticky: true"></tr>
                                <tr mat-row *matRowDef="let row; columns: displayColumns;" class="student-element-row"
                                    style="cursor: pointer;"></tr>
                            </table>
                        </div>
                    </ng-container>
                    <ng-template #NoEmploymentTypes>
                        <div class="d-flex vertical-center nodata">
                        </div>
                    </ng-template>
                </div>
            </mat-drawer-container>
        </div>
    </div>
</div>
<ng-template #basicmodal let-modal>
    <div>
        <div class="modal-header">
            <h4 class="modal-title" id="modal-basic-title">{{title}}</h4>
            <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body pd-20">
            <input id="checkbox-info-1" type="checkbox" (change)="selectAll()" [checked]="isSelectAll"
                [disabled]="isView"> {{'lbl_select_all'| translate}}
            <ul>
                <li class="main" *ngFor="let type of employmentTypes;let i =index">
                    <input id="checkbox-info-1" type="checkbox" [checked]="type.isSelected"
                        (change)="selectEmploymentType(type.id)" [disabled]="isView">
                    <span class="pl-2">{{type.name}}</span>
                    <ul *ngIf="type.childEmploymentType && type.childEmploymentType.length > 0">
                        <li *ngFor="let child of type.childEmploymentType" class="sub pl-2">
                            <input id="checkbox-info-1" type="checkbox" [checked]="child.isSelected"
                                (change)="selectEmploymentType(child.id)" [disabled]="isView">
                            <span class="pl-1"> {{child.name}}</span>
                        </li>
                    </ul>
                </li>
            </ul>

        </div>
        <div class="modal-footer">
            <button *ngIf="!isView" class="btn btn-sm btn-info filterbtn" (click)="insertServiceEmploymetType()">
                {{'button_lbl_save'| translate}}
            </button>
            <button class="btn btn-sm btn-secondary filterbtn" (click)="closeDialog()">
                {{'button_lbl_cancel'| translate}}
            </button>
        </div>
    </div>
</ng-template>