<div class="flex">
  <mat-card class="my-single-card">
    <mat-card-header class="card-header">
      <h2 class="icon-title">
        <span class="material-symbols-outlined">mail</span>
        Mail
      </h2>
    </mat-card-header>
    <mat-card-content>

      <div class="div-center" style="flex-direction: column">
        <div *ngIf="!mailSent()">
          <mat-form-field appearance="fill" class="w-full">
            <mat-label>Servizio</mat-label>
            <!-- Scelta servizio -->
            <mat-select [formControl]="selectedService">
              @for (service of mailServices(); track service) {
              <mat-option [value]="service">{{
                service.description
              }}</mat-option>
              }
            </mat-select>
          </mat-form-field>

          <!-- Campi richiesti dal form associato alla widget -->
          <form
            [formGroup]="dynamicForm"
            (ngSubmit)="newMailChannelSession()"
            *ngIf="dynamicForm"
          >
            <mat-form-field
              *ngFor="let field of fields()"
              appearance="fill"
              class="w-full"
            >
              <mat-label>{{ field.label }}</mat-label>
              <input
                matInput
                [formControlName]="field.key"
                [type]="field.elementType === 'TEXT' ? 'text' : 'text'"
                [required]="field.required === 'TRUE'"
              />
              <mat-error
                *ngIf="dynamicForm.get(field.key)?.errors?.['required']"
              >
                {{ field.label }} è obbligatorio
              </mat-error>
              <mat-error
                *ngIf="dynamicForm.get(field.key)?.errors?.['pattern']"
              >
                {{ field.label }} non è valido
              </mat-error>
            </mat-form-field>
          </form>

          <!-- Messaggio -->
          <mat-form-field appearance="fill" class="w-full">
            <mat-label>Digita il messaggio</mat-label>
            <textarea
              matInput
              [formControl]="bodyMessage"
              rows="6"
              required
            ></textarea>
            <mat-error
              *ngIf="dynamicForm.get('bodyMessage')?.errors?.['required']"
            >
              Il messaggio è obbligatorio
            </mat-error>
          </mat-form-field>

          <div style="display: flex; justify-content: flex-end">
            <button
              mat-flat-button
              type="submit"
              (click)="newMailChannelSession()"
            >
              Invia
            </button>
          </div>
        </div>
      </div>

      <!-- Messaggio di successo/errore -->
      <div
        *ngIf="mailSent() && !mailError()"
        class="div-center"
        style="flex-direction: column; margin-bottom: 16px"
      >
        <span>Mail inviata con successo!</span>
      </div>
      <div
        *ngIf="mailSent() && mailError()"
        class="div-center"
        style="flex-direction: column; margin-bottom: 16px"
      >
        <span>Si è verificato un errore durante l'invio della mail</span>
      </div>

    </mat-card-content>
  </mat-card>
</div>
