<div class="form-dialog">
  <!-- Header -->
  <div class="dialog-header">
    <h2 class="text-xl font-semibold">{{ data.title }}</h2>
    <button mat-icon-button (click)="onCancel()" class="close-button">
      <i class="fa fa-times"></i>
    </button>
  </div>

  <!-- Body -->
  <div class="dialog-body">
    <form [formGroup]="form" (ngSubmit)="onSubmit()">
      <div class="form-fields">
        <ng-container *ngFor="let field of data.fields">
          <!-- Text, Email, Number -->
          <mat-form-field
            *ngIf="['text', 'email', 'number'].includes(field.type)"
            appearance="outline"
            class="w-full">
            <mat-label>{{ field.label }}</mat-label>
            <input
              matInput
              [type]="field.type"
              [formControlName]="field.name"
              [placeholder]="field.placeholder || ''" />
            <mat-hint *ngIf="field.hint">{{ field.hint }}</mat-hint>
            <mat-error>{{ getErrorMessage(field.name) }}</mat-error>
          </mat-form-field>

          <!-- Date -->
          <mat-form-field
            *ngIf="field.type === 'date'"
            appearance="outline"
            class="w-full">
            <mat-label>{{ field.label }}</mat-label>
            <input
              matInput
              [matDatepicker]="picker"
              [formControlName]="field.name" />
            <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
            <mat-datepicker #picker></mat-datepicker>
            <mat-error>{{ getErrorMessage(field.name) }}</mat-error>
          </mat-form-field>

          <!-- Select -->
          <mat-form-field
            *ngIf="field.type === 'select'"
            appearance="outline"
            class="w-full">
            <mat-label>{{ field.label }}</mat-label>
            <mat-select [formControlName]="field.name">
              <mat-option
                *ngFor="let option of field.options"
                [value]="option.value">
                {{ option.label }}
              </mat-option>
            </mat-select>
            <mat-error>{{ getErrorMessage(field.name) }}</mat-error>
          </mat-form-field>

          <!-- Textarea -->
          <mat-form-field
            *ngIf="field.type === 'textarea'"
            appearance="outline"
            class="w-full">
            <mat-label>{{ field.label }}</mat-label>
            <textarea
              matInput
              [formControlName]="field.name"
              [placeholder]="field.placeholder || ''"
              rows="4"></textarea>
            <mat-error>{{ getErrorMessage(field.name) }}</mat-error>
          </mat-form-field>

          <!-- Checkbox -->
          <mat-checkbox
            *ngIf="field.type === 'checkbox'"
            [formControlName]="field.name"
            class="w-full mb-4">
            {{ field.label }}
          </mat-checkbox>
        </ng-container>
      </div>
    </form>
  </div>

  <!-- Footer -->
  <div class="dialog-footer">
    <button mat-button (click)="onCancel()" [disabled]="loading">
      {{ data.cancelText }}
    </button>
    <button
      mat-raised-button
      color="primary"
      (click)="onSubmit()"
      [disabled]="loading || form.invalid">
      <span *ngIf="!loading">{{ data.submitText }}</span>
      <span *ngIf="loading">
        <i class="fa fa-spinner fa-spin mr-2"></i>
        Chargement...
      </span>
    </button>
  </div>
</div>
