<div class="container">
    <h4 mat-dialog-title class="row shadowed mb-3" *ngIf="!newCatalog">
        <i class="far fa-clipboard mr-2"></i>
        <span>Edit Service Catalog</span>
        <div class="card-stats">
            Last updated at {{catalog?.lastUpdate | date:'short'}} (Local Time)
        </div>
    </h4>

    <h4 mat-dialog-title class="row shadowed mb-3" *ngIf="newCatalog">
        <i class="far fa-clipboard mr-2"></i>
        <span>Create New Service Catalog</span>
    </h4>
    <form [formGroup]="editForm">

        <mat-dialog-content>
            <div class="row">
                <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>

                <mat-form-field appearance="" class="col-md-12">
                    <mat-label>Lifecycle Status</mat-label>
                    <!-- <input matInput formControlName="lifecycleStatus"> -->
                    <mat-select formControlName="lifecycleStatus">
                        <mat-option *ngFor="let status of lifecycleStatuses" [value]="status">{{status}}
                        </mat-option>
                    </mat-select>
                </mat-form-field>

                <!-- <mat-form-field appearance="" class="col-md-12">
                                <mat-label>Categories</mat-label>
                                <mat-select formControlName="categoryIDs" multiple>
                                    <mat-option *ngFor="let category of categories" [value]="category.id">
                                        {{category.name}}</mat-option>
                                </mat-select>
                            </mat-form-field> -->
                <mat-form-field appearance="" class="col-md-12">
                    <mat-label>Assigned categories</mat-label>
                    <mat-chip-list #chipList aria-label="Category selection" formControlName="category">
                        <mat-chip *ngFor="let category of categories" [selectable]="selectable" [removable]="removable"
                            (removed)="removeChip(category)">
                            {{category.name}}
                            <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
                        </mat-chip>
                        <input placeholder="New category..." #categoryInput [formControl]="categoryInputCtrl"
                            [matAutocomplete]="auto" matInput [matChipInputFor]="chipList"
                            [matChipInputAddOnBlur]="addOnBlur" (matChipInputTokenEnd)="addChip($event)"
                            (click)="openList()">
                    </mat-chip-list>
                    
                    <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)" autoActiveFirstOption>
                        <mat-option *ngFor="let category of filteredCategories | async" [value]="category">
                            {{category.name}}
                        </mat-option>
                    </mat-autocomplete>
                </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 [matDatepicker]="pickerFrom" formControlName="startDateTime">
                                            <mat-datepicker-toggle matSuffix [for]="pickerFrom"></mat-datepicker-toggle>
                                            <mat-datepicker #pickerFrom></mat-datepicker> -->

                            <input matInput [owlDateTime]="pickerFrom" placeholder="Date Time"
                                formControlName="startDateTime">
                            <mat-icon matSuffix>date_range</mat-icon>
                            <!-- <span [owlDateTimeTrigger]="dt1"><i class="fa fa-calendar"></i></span> -->
                            <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 [matDatepicker]="pickerUntil" formControlName="endDateTime">
                                            <mat-datepicker-toggle matSuffix [for]="pickerUntil"></mat-datepicker-toggle>
                                            <mat-datepicker #pickerUntil></mat-datepicker> -->
                            <input matInput [owlDateTime]="pickerUntil" placeholder="Date Time"
                                formControlName="endDateTime">
                            <mat-icon matSuffix>date_range</mat-icon>
                            <!-- <span [owlDateTimeTrigger]="dt1"><i class="fa fa-calendar"></i></span> -->
                            <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>



        </mat-dialog-content>

        <div class="container-fluid">
            <div class="row justify-content-end">
                <button type="button" class="btn btn-danger m-2" (click)="closeDialog()">Cancel</button>
                <button type="submit" class="btn btn-success m-2" (click)="submitDialog()">Submit</button>
            </div>
        </div>
    </form>

</div>