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

<div class="container-fluid py-5" *ngIf="!offeringNotFound && 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 Offering Designer</h2>

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

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

                                <div class="card-stats" *ngIf="!newOffering">
                                    <i class="fas fa-sync spin mr-2"></i>Last updated at
                                    {{offering?.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]="newOffering" (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-12">
                                                        <mat-label>Linked Product Specification (optional)</mat-label>
                                                        <mat-select formControlName="productSpecification" (selectionChange)="onSpecificationChange($event)">
                                                            <mat-option *ngFor="let productSpec of productSpecifications"
                                                                [value]="productSpec">
                                                                {{productSpec.name}}
                                                            </mat-option>
                                                        </mat-select>
                                                    </mat-form-field>


                                                    <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)="updateOfferingGeneral()"><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 -->

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