<div class="container-fluid py-5" *ngIf="serviceTestNotFound" [@fadeIn]>
    <div class="row align-items-center justify-content-center minh-30vh">
        <div class="col-12 text-center">
            <h4>Service with id #{{serviceTestID}} is not found</h4>
        </div>
    </div>
</div>
<div class="container-fluid py-5" *ngIf="!serviceTestNotFound">
    <div class="row minh-30vh">
        <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">Service Test Instance Overview And Management</h2>
                                <p class="shadowed mb-0" *ngIf="!newServiceTest">Overview and Manage
                                    <dfn><b>{{serviceTest?.name}}</b></dfn> service test instance</p>
                            </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]="newServiceTest"
                                    (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">
                                <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">
                                                    <div class="col-lg-6">
                                                        <h6>Name</h6>
                                                        <p>{{serviceTest?.name}}</p>
                                                    </div>

                                                    <div class="col-lg-6">
                                                        <h6>Lifecycle Status</h6>
                                                        <p>{{serviceTest?.lifecycleStatus}}</p>
                                                    </div>

                                                    <div class="col-lg-6" *ngIf="!editMode" >
                                                        <h6>Description</h6>
                                                        <p>{{serviceTest?.description}}</p>
                                                    </div>

                                                    <mat-form-field class="col-lg-6" *ngIf="editMode">
                                                        <mat-label>Description </mat-label>
                                                        <textarea matTextareaAutosize="true" matAutosizeMinRows="2"
                                                            matInput formControlName="description"></textarea>
                                                    </mat-form-field>

                                                    <div class="col-lg-6">
                                                        <h6>Last Updated</h6>
                                                        <p [class.mb-0]="serviceTest?.lastUpdate">{{serviceTest?.lastUpdate | date:'d MMM y, h:mm a'}} - Local Time</p>
                                                        <p *ngIf="serviceTest?.lastUpdate">{{serviceTest?.lastUpdate | date:'d MMM y, h:mm a':'UTC'}} - UTC</p>
                                                    </div>
                                                </div>

                                                <div class="row">
                                                    <div class="col-lg-6">
                                                        <h6>Linked Service</h6>
                                                        <p>
                                                            <a *ngIf="serviceTest?.relatedService" routerLink='/services/service/{{serviceTest?.relatedService.id}}'>{{serviceTest?.relatedService.id}}</a>
                                                        </p>
                                                    </div>
                                                    <div class="col-lg-6">
                                                        <h6>Service Test Specification</h6>
                                                        <p>
                                                            <a *ngIf="serviceTest?.testSpecification" routerLink='/{{appService.portalDomain}}/service_test_spec/{{serviceTest.testSpecification.id}}'>{{serviceTest?.testSpecification.id}}</a>
                                                        </p>
                                                    </div>
                                                </div>

                                            </div>

                                            <div class="card-footer">
                                                <div class="container-fluid mt-2">
                                                    <div class="row justify-content-end">
                                                        <button type="button" *ngIf="!editMode" class="btn btn-warning"
                                                            (click)="enableServiceTestEditing()"><i
                                                                class="far fa-edit mr-1"></i>edit</button>
                                                        <button type="button" *ngIf="editMode"
                                                            class="btn btn-danger mr-2"
                                                            (click)="cancelServiceTestEditing()">Cancel</button>
                                                        <button type="button" *ngIf="editMode" class="btn btn-success"
                                                            (click)="submitServiceTestEditing()">Submit</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </form>

                                </div>

                                <div class="tab-pane active" *ngIf="activeListItem === 'Service Test Characteristics'"
                                    role="tabpanel" [@fadeIn]>
                                    <div class="card mat-elevation-z1 bg-light">
                                        <div class="card-body">
                                            <div *ngIf="serviceTest?.characteristic.length === 0">
                                                There are not any Service Test characteristics allocated.
                                            </div>

                                            <div class="table-responsive"
                                                *ngIf="serviceTest?.characteristic.length > 0">

                                                <table class="table  table-inverse bg-white mb-0">
                                                    <thead class="thead-inverse">
                                                        <tr class="table-light">
                                                            <th>
                                                                <h6 class="mb-0 font-weight-bold">Characteristic</h6>
                                                            </th>
                                                            <th>
                                                                <h6 class="mb-0 font-weight-bold">Value</h6>
                                                            </th>

                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        <tr
                                                            *ngFor="let characteristic of serviceTest?.characteristic">
                                                            <td class="align-middle"><b>{{characteristic.name}}</b>
                                                            </td>
                                                            <ng-container [ngSwitch]="characteristic.valueType">

                                                                <ng-container *ngSwitchCase="'SET'">
                                                                    <ng-container *ngTemplateOutlet="iterables">
                                                                    </ng-container>
                                                                </ng-container>

                                                                <ng-container *ngSwitchCase="'ARRAY'">
                                                                    <ng-container *ngTemplateOutlet="iterables">
                                                                    </ng-container>
                                                                </ng-container>

                                                                <ng-container *ngSwitchDefault>
                                                                    <td class="align-middle">
                                                                        <span *ngIf="characteristic.value && characteristic.value.value">{{characteristic.value.value}}</span>
                                                                    </td>

                                                                </ng-container>

                                                                <ng-template #iterables>
                                                                    <td class="align-middle">
                                                                        <table class="table-borderless" *ngIf="characteristic.value">
                                                                            <tbody>
                                                                                <tr 
                                                                                    *ngFor="let value of (characteristic.value.value | jsonParse)">
                                                                                    <td>
                                                                                        {{value.value}} <span
                                                                                            *ngIf="value.alias">({{value.alias}})</span>
                                                                                    </td>
                                                                                </tr>
                                                                            </tbody>
                                                                        </table>

                                                                    </td>
                                                                </ng-template>
                                                            </ng-container>

                                                        </tr>
                                                    </tbody>
                                                </table>


                                            </div>

                                        </div>
                                        <div class="card-footer" >
                                            <!-- <div class="container-fluid mt-3" *ngIf="serviceTest?.characteristic.length > 0">
                                                <div class="row justify-content-end">
                                                    <button class="btn btn-block btn-warning"
                                                        (click)="openCharacteristicsEditDialog()"><i
                                                            class="far fa-edit mr-1"></i>Edit Service
                                                        Characteristics</button>
                                                </div>
                                            </div> -->
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-footer"></div>

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