<div class="container">
  <h4 mat-dialog-title class="row shadowed mb-3" *ngIf="!newCatalog">
      <i class="far fa-clipboard mr-2"></i>
      <span>Edit Resource Catalog</span>
      <div class="row 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 Resource 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-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="Categories" #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>
