<div class="container-fluid py-5" *ngIf="specNotFound" [@fadeIn]>
    <div class="row align-items-center justify-content-center minh-30vh">
        <div class="col-12 text-center">
            <h4>Product Specification with id #{{specID}} is not found</h4>
        </div>
    </div>
</div>

<div class="container-fluid py-5" *ngIf="!specNotFound && finishedLoading">
    <div class="row">
        <div class="col-12">
            <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">Product Specification Designer</h2>

                                <p class="shadowed mb-0" *ngIf="newSpecification">Design a new Product
                                    Specification</p>

                                <p class="shadowed mb-0" *ngIf="!newSpecification">Edit Design of
                                    <dfn><b>{{spec?.name}}</b></dfn> Product Specification
                                </p>

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

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

                <div class="card-body">
                    <div class="row">

                        <div class="col-xl-2 col-lg-3">
                            <div class="nav flex-column nav-pills mb-3 mb-lg-0" role="tablist"
                                aria-orientation="vertical">
                                <a class="nav-link " [class.active]="item === activeListItem"
                                    [class.mat-elevation-z2]="item === activeListItem"
                                    [class.disabled]="newSpecification" (click)="selectListitem(item)"
                                    *ngFor="let item of listItems" role="tab" aria-selected="true">{{item}}</a>

                            </div>
                        </div>

                        <div class="col-xl-10 col-lg-9">
                            <div class="tab-content">

                                <!-- Main Properties Tab -->
                                <div class="tab-pane active" *ngIf="activeListItem === 'Main Properties'"
                                    role="tabpanel" [@fadeIn]>
                                    <form [formGroup]="editForm">
                                        <div class="card mat-elevation-z1 bg-light">
                                            <div class="card-body">
                                                <div class="row align-items-center">
                                                    <mat-form-field class="col-md-6">
                                                        <mat-label>Name</mat-label>
                                                        <input matInput formControlName="name">
                                                    </mat-form-field>

                                                    <mat-form-field class="col-md-6">
                                                        <mat-label>Version</mat-label>
                                                        <input matInput formControlName="version">
                                                    </mat-form-field>

                                                    <!-- <div class="col-md-2 col-sm-6 text-center">
                                                        <mat-checkbox color="primary" formControlName="isBundle"
                                                            (change)="bundleCheckboxChanged($event)">Bundle
                                                        </mat-checkbox>
                                                    </div> -->

                                                    <mat-form-field class="col-md-12">
                                                        <mat-label>Description (supports Markdown)</mat-label>
                                                        <textarea cdkTextareaAutosize #autosize="cdkTextareaAutosize" cdkAutosizeMaxRows="5"
                                                            matInput formControlName="description"></textarea>
                                                    </mat-form-field>

                                                    <mat-form-field 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 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 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 class="col-md-12">
                                                        <br/>
                                                        <mat-label>Relationships overview</mat-label>
                                                        <br/>
                                                        <img [src]="currentSpecRelationshipsUrl" [alt]="currentSpecRelationshipsUrl" >
                                                    </div> -->
                                                    
                                                </div>

                                                
                                                <div class="container-fluid">
                                                    <div class="row justify-content-end">
                                                        <button type="submit" class="btn btn-primary"
                                                            (click)="updateProductSpecGeneral()"><i
                                                                class="fas fa-check mr-2"></i>Submit</button>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="card-footer"></div>
                                        </div>
                                    </form>
                                </div>
                                <!-- END OF Main Properties Tab -->

                                <!-- Service Specification Relationships Tab -->
                                <div class="tab-pane active disable"
                                    *ngIf="activeListItem === 'Service Specification Relationships'" role="tabpanel"
                                    [@fadeIn]>
                                    <div class="card mat-elevation-z1 bg-light">
                                        <div class="card-body">
                                                <div class="filter-container row align-items-center justify-content-center">
                                                    <mat-form-field *ngIf="spec?.serviceSpecification.length > 0"
                                                        class="col-sm-10">
                                                        <mat-label>Apply Filter to related Service Specifications...
                                                        </mat-label>
                                                        <input matInput [formControl]="serviceSpecificationRelationshipFilterCtrl">
                                                    </mat-form-field>
    
                                                    <div *ngIf="spec?.serviceSpecification.length === 0"
                                                        class="col-sm-10 children-categories-font">
                                                        There are not any Service Specification relationships assigned yet.
                                                    </div>
    
                                                    <div class="text-right col-sm-2 ">
                                                        <button type="button" class="btn btn-success btn-sm"
                                                            (click)="openAssignSpecRelationshipDialog()"><i
                                                                class="fas fa-cart-arrow-down mr-2"></i>Assign</button>
                                                    </div>
                                                </div>
    
                                                <div *ngFor="let relatedServiceSpecification of filteredServiceSpecificationRel$ | async"
                                                    class="spec-relationship-container pt-3">
                                                    <div><a routerLink="/services/service_spec_update/{{relatedServiceSpecification.id}}"><b>{{relatedServiceSpecification.name}}</b></a></div>
                                                    <a routerLink='/services/service_spec_update/{{relatedServiceSpecification.id}}'>
                                                        <button class="btn btn-warning btn-sm"><i class="far fa-edit"></i></button>
                                                    </a>
                                                </div>
                           
                                        </div>
                                        <div class="card-footer"></div>

                                    </div>
                                </div>
                                <!-- END OF Service Specification Relationships Tab -->

                                <!-- Related Parties Tab -->
                                <div class="tab-pane active" *ngIf="activeListItem === 'Related Parties'"
                                    role="tabpanel" [@fadeIn]>
                                    <div class="card mat-elevation-z1 bg-light">
                                        <div class="card-body">
                                            <div *ngIf="spec?.relatedParty.length === 0">
                                                There are not any related parties assigned
                                            </div>

                                            <div *ngIf="spec?.relatedParty.length > 0">
                                                <h6>Username (Role)</h6>
                                                <p class="mb-2" *ngFor="let relatedParty of spec?.relatedParty">{{relatedParty.name}} ({{relatedParty.role}})</p>
                                            </div>
                                        </div>
                                        <div class="card-footer"></div>

                                    </div>
                                </div>
                                <!-- END OF Related Parties Tab -->
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-footer"></div>
            </div>
        </div>
    </div>
</div>