<mat-dialog-content>
  <div class="content">
    <h2>{{ T.F.TAG.D_CREATE.CREATE | translate }}</h2>
  </div>

  <form
    #formEl="ngForm"
    (ngSubmit)="formEl.valid && close(true)"
  >
    <mat-form-field>
      <mat-label>{{ T.F.TAG.FORM_BASIC.L_TITLE | translate }}</mat-label>
      <input
        [(ngModel)]="title"
        name="title"
        matInput
        required
        type="text"
        autofocus
      />
    </mat-form-field>

    <mat-form-field>
      <mat-label>{{ T.F.TAG.FORM_BASIC.L_ICON | translate }}</mat-label>
      <mat-icon>{{ icon }}</mat-icon>
      <input
        [(ngModel)]="icon"
        (focus)="onIconFocus()"
        (ngModelChange)="onIconInput($event)"
        [matAutocomplete]="iconAuto"
        name="icon"
        matInput
        type="text"
      />
      <mat-autocomplete
        #iconAuto="matAutocomplete"
        [autoActiveFirstOption]="false"
      >
        @for (ico of filteredIcons(); track ico) {
          <mat-option [value]="ico">
            <mat-icon>{{ ico }}</mat-icon>
            <span>{{ ico }}</span>
          </mat-option>
        }
      </mat-autocomplete>
    </mat-form-field>

    <mat-form-field>
      <mat-label>{{ T.F.TAG.FORM_BASIC.L_COLOR | translate }}</mat-label>
      <input
        [(ngModel)]="color"
        name="color"
        matInput
        type="color"
      />
    </mat-form-field>
  </form>
</mat-dialog-content>

<mat-dialog-actions align="end">
  <div class="wrap-buttons">
    <button
      (click)="close(false)"
      class="btn btn-primary submit-button"
      mat-button
      type="button"
    >
      <mat-icon>close</mat-icon>
      {{ T.G.CANCEL | translate }}
    </button>

    <button
      (click)="close(true)"
      class="btn btn-primary submit-button"
      color="primary"
      mat-stroked-button
      [disabled]="!title.trim()"
    >
      <mat-icon>check</mat-icon>
      {{ T.G.SAVE | translate }}
    </button>
  </div>
</mat-dialog-actions>
