<div class="container py-5">
    <div class="row">
        <div class="col-12">

            <form [formGroup]="editForm">
                <div class="card card-paper mb-0">
                    
                    <div class="card-header">
                        <div class="container-fluid">
                            <div class="row justify-content-between align-items-center">
                                <div>
                                    <h2 class="shadowed">Service Category Designer</h2>

                                    <p class="shadowed mb-0" *ngIf="newCategory">Design a new service category</p>

                                    <p class="shadowed" *ngIf="!newCategory">Edit Design of <dfn><b>{{category?.name}}</b></dfn> Service Category</p>

                                    <div class="card-stats" *ngIf="!newCategory">
                                        <i class="fas fa-sync spin mr-2"></i>Last updated at
                                        {{category?.lastUpdate | date:'short'}} (Local Time)
                                    </div>

                                </div>

                            </div>
                            
                            <!-- <div class="row mt-2" *ngIf="!newCategory">
                                <nav aria-label="breadcrumb">
                                    <ol class="breadcrumb mb-0">
                                        <li class="breadcrumb-item" *ngIf="category?.parentId && !editForm.controls.parentId.value?.isRoot">...</li>
                                        <li class="breadcrumb-item"  *ngIf="category?.parentId"><span *ngIf="!editForm.controls.parentId.value?.isRoot"> </span> <a routerLink='/{{appService.portalDomain}}/service_categories_update/{{editForm.controls.parentId.value.id}}'>{{editForm.controls.parentId.value.name}}</a></li>
                                        <li class="breadcrumb-item active" aria-current="page"><span *ngIf="!category?.isRoot"> </span> {{category?.name}}</li>
                                    </ol>
                                </nav>
                            </div> -->

                            <nav class="row mt-3 " *ngIf="!(category?.isRoot || newCategory)">
                                <span *ngIf="category?.parentId && !editForm.controls.parentId.value?.isRoot" class="d-flex align-items-center">
                                    <a mat-button>...</a>
                                </span>
                            
                                <span *ngIf="category?.parentId" class="d-flex align-items-center">
                                    <mat-icon *ngIf="!editForm.controls.parentId.value?.isRoot">keyboard_arrow_right</mat-icon>
                                    <a mat-button
                                        routerLink='/{{appService.portalDomain}}/service_categories_update/{{editForm.controls.parentId.value?.id}}'>{{editForm.controls.parentId.value?.name}}
                                    </a>
                                </span>
                            
                                <span class="d-flex align-items-center">
                                    <mat-icon>keyboard_arrow_right</mat-icon>
                                    <a mat-button disabled="true">{{category?.name}}</a>
                                </span>
                            </nav>
                            
                        </div>
                    </div>


                    <div class="card-body">
                        <mat-accordion multi="true">
                            <mat-expansion-panel expanded="true" class="bg-light" [@fadeIn]>
                                <mat-expansion-panel-header>
                                    <mat-panel-title>
                                        Main Service Category properties
                                    </mat-panel-title>
                                </mat-expansion-panel-header>
                            
                                <div class="row align-items-center">
                            
                                    <mat-form-field appearance="" class="col-md-6">
                                        <mat-label>Name</mat-label>
                                        <input matInput formControlName="name">
                                    </mat-form-field>
                            
                                    <mat-form-field appearance="" class="col-md-6">
                                        <mat-label>Version</mat-label>
                                        <input matInput formControlName="version">
                                    </mat-form-field>
                            
                                    <mat-form-field appearance="" class="col-md-12">
                                        <mat-label>Description</mat-label>
                                        <textarea matTextareaAutosize="true" matAutosizeMinRows="2" matInput
                                            formControlName="description"></textarea>
                                    </mat-form-field>
                            
                                    <div class="col-md-6">
                                        <mat-checkbox color="primary" formControlName="isRoot">is Root</mat-checkbox>
                                    </div>
                            
                                    <mat-form-field class="col-md-6">
                                        <input type="text" placeholder="Parent Category" aria-label="Parent category" matInput
                                            formControlName="parentId" [matAutocomplete]="auto">
                                        <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete" [displayWith]="displayFn">
                                            <mat-option *ngFor="let category of filteredCategories$ | async" [value]="category">
                                                {{category.name}}
                                            </mat-option>
                                        </mat-autocomplete>
                                    </mat-form-field>
                            
                                    <mat-form-field appearance="" class="col-md-12">
                                        <mat-label>Lifecycle Status</mat-label>
                                        <mat-select formControlName="lifecycleStatus">
                                            <mat-option *ngFor="let status of lifecycleStatuses" [value]="status">{{status}}
                                            </mat-option>
                                        </mat-select>
                                    </mat-form-field>
                            
                                    <div class="col-12" formGroupName="validFor">
                                        <div class="row">
                                            <mat-form-field appearance="" class="col-md-6" [owlDateTimeTrigger]="pickerFrom">
                                                <mat-label>Valid From</mat-label>
                                                <input matInput [owlDateTime]="pickerFrom" placeholder="Date Time" formControlName="startDateTime">
                                                <mat-icon matSuffix>date_range</mat-icon>
                                                <owl-date-time #pickerFrom></owl-date-time>
                                                <mat-hint>Date is displayed in Local Time <span *ngIf="editForm.value.validFor.startDateTime">(UTC: {{editForm.value.validFor.startDateTime | date:'dd/MM/yy, HH:mm':'UTC'}})</span></mat-hint>
                                            </mat-form-field>
                            
                                            <mat-form-field appearance="" class="col-md-6" [owlDateTimeTrigger]="pickerUntil">
                                                <mat-label>Valid Until</mat-label>
                                                <input matInput [owlDateTime]="pickerUntil" placeholder="Date Time" formControlName="endDateTime">
                                                <mat-icon matSuffix>date_range</mat-icon>
                                                <owl-date-time #pickerUntil></owl-date-time>
                                                <mat-hint>Date is displayed in Local Time <span *ngIf="editForm.value.validFor.endDateTime">(UTC: {{editForm.value.validFor.endDateTime | date:'dd/MM/yy, HH:mm':'UTC'}})</span></mat-hint>
                                            </mat-form-field>
                                        </div>
                                    </div>
                                </div>
                                <div class="container-fluid mt-4">
                                    <div class="row justify-content-end">
                                            <button type="submit" class="btn btn-primary btn-block btn-sm"
                                        (click)="updateServiceCategory()"><i class="fas fa-check mr-2"></i>Submit</button>
                                    </div>
                                </div>
                            </mat-expansion-panel>


                            <mat-expansion-panel [expanded]="!newCategory" [disabled]="newCategory" class="bg-light" [@fadeIn]>
                                <mat-expansion-panel-header>
                                    <mat-panel-title>
                                        Create and assign Subcategories to Service Category
                                    </mat-panel-title>
                                </mat-expansion-panel-header>
                            
                                <div class="filter-container row align-items-center justify-content-center">
                                    <div class="col-md-10" *ngIf="category?.category.length === 1">{{category?.category.length}} Subcategory assigned</div>
                                    <div class="col-md-10" *ngIf="category?.category.length !== 1">{{category?.category.length}} Subcategories assigned</div>

                                    <div class="col-md-2 my-md-0 my-2">
                                        <button type="button" class="btn btn-success btn-sm btn-block" (click)="openCategoryChildDialog()"><i
                                                class="fas fa-plus-circle mr-2"></i>Create</button>
                                    </div>

                                    <mat-form-field *ngIf="category?.category.length > 0" class="col-12 mt-3">
                                        <mat-label>Apply filter to assigned Subcategories...</mat-label>
                                        <input matInput [formControl]="childrenCategoryFilterCtrl">
                                    </mat-form-field>
                                </div>
                            
                                <div *ngFor="let category of filteredChildrenCategories$ | async" class="child-category-container pb-2" [@fadeIn]>
                                    <a routerLink="/{{appService.portalDomain}}/service_categories_update/{{category.id}}">{{category.name}}</a>

                                    <div>
                                        <button class="btn btn-warning btn-sm mr-1" routerLink='/{{appService.portalDomain}}/service_categories_update/{{category.id}}'><i
                                                class="far fa-edit"></i></button>
                                        <button class="btn btn-danger btn-sm" (click)="openCategoryDeleteDialog(category)"><i
                                                class="far fa-trash-alt"></i></button>
                                    </div>
                            
                                </div>
                            </mat-expansion-panel>

                            
                            <mat-expansion-panel [expanded]="!newCategory" [disabled]="newCategory" class="bg-light" [@fadeIn]>
                                <mat-expansion-panel-header>
                                    <mat-panel-title>
                                        Manage the assignment of Service Specifications to Service Category
                                    </mat-panel-title>
                                </mat-expansion-panel-header>
                            
                                <div class="filter-container row align-items-center justify-content-center">
                                    <div class="col-md-10">{{category?.serviceCandidate.length}} Service Specification(s) assigned</div>
                                
                                    <div class="col-md-2 my-md-0 my-2">
                                        <button type="button" class="btn btn-success btn-sm btn-block" (click)="openAssignCandidatesDialog(category)"><i
                                                class="fas fa-cart-arrow-down mr-2"></i>Manage</button>
                                    </div>

                                    <mat-form-field *ngIf="category?.serviceCandidate.length > 0" class="col-12 mt-3">
                                        <mat-label>Apply Filter to assigned Service Specifications...</mat-label>
                                        <input matInput [formControl]="serviceCandidatesFilterCtrl">
                                    </mat-form-field>                   
                               </div>
                            
                                <div *ngFor="let candidate of filteredServiceCandidates$ | async" class="child-category-container pb-2" [@fadeIn]>
                                    <a routerLink="./" (click)='navigateToServiceSpec(candidate)'>{{candidate.name}}</a>
                                    <button class="btn btn-warning btn-sm" (click)='navigateToServiceSpec(candidate)'><i
                                        class="far fa-edit"></i></button>   
                            
                                </div>
                            </mat-expansion-panel>

    
                        </mat-accordion>

                    </div>

                    <div class="card-footer"></div>

                </div>
            </form>

        </div>
    </div>
</div>