<h2 mat-dialog-title class="dialog-title">{{ editing ? ('editTask' | translate) : ('createTask' | translate) }}</h2>

<form [formGroup]="taskForm" class="task-form">
  <mat-dialog-content>

    <h3 class="section-title">Información</h3>
    <mat-divider></mat-divider>
    <mat-form-field appearance="fill" class="full-width">
      <mat-label>Información</mat-label>
      <textarea matInput formControlName="notes" placeholder="Ingresa tus notas aquí"></textarea>
    </mat-form-field>

    <h3 class="section-title">{{ 'informationSectionTitle' | translate }}</h3>
    <mat-divider></mat-divider>
    <mat-form-field appearance="fill" class="full-width">
      <mat-label>{{ 'informationLabel' | translate }}</mat-label>
      <textarea matInput formControlName="notes" placeholder="{{ 'notesPlaceholder' | translate }}"></textarea>
    </mat-form-field>

    <h3 class="section-title">{{ 'commandSelectionSectionTitle' | translate }}</h3>
    <mat-divider></mat-divider>
    <mat-form-field appearance="fill" class="full-width">
      <mat-label>{{ 'selectCommandsLabel' | translate }}</mat-label>
      <mat-select formControlName="commandGroup" (selectionChange)="onCommandGroupChange()">
        <mat-option *ngFor="let group of availableCommandGroups" [value]="group.uuid">
          {{ group.name }}
        </mat-option>
      </mat-select>
      <mat-error *ngIf="taskForm.get('commandGroup')?.invalid">{{ 'requiredFieldError' | translate }}</mat-error>
    </mat-form-field>

    <mat-form-field appearance="fill" class="full-width">
      <mat-label>{{ 'selectIndividualCommandsLabel' | translate }}</mat-label>
      <mat-select formControlName="extraCommands" multiple>
        <mat-option *ngFor="let command of availableIndividualCommands" [value]="command.uuid">
          {{ command.name }}
        </mat-option>
      </mat-select>
    </mat-form-field>

    <h3 class="section-title">{{ 'executionDateTimeSectionTitle' | translate }}</h3>
    <mat-divider></mat-divider>
    <mat-form-field appearance="fill" class="full-width">
      <mat-label>{{ 'executionDateLabel' | translate }}</mat-label>
      <input matInput [matDatepicker]="picker" formControlName="date" placeholder="{{ 'selectDatePlaceholder' | translate }}">
      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
      <mat-datepicker #picker></mat-datepicker>
      <mat-error *ngIf="taskForm.get('date')?.invalid">{{ 'requiredFieldError' | translate }}</mat-error>
    </mat-form-field>

    <mat-form-field appearance="fill" class="full-width">
      <mat-label>{{ 'executionTimeLabel' | translate }}</mat-label>
      <input matInput type="time" formControlName="time" placeholder="{{ 'selectTimePlaceholder' | translate }}">
      <mat-error *ngIf="taskForm.get('time')?.invalid">{{ 'requiredFieldError' | translate }}</mat-error>
    </mat-form-field>

    <h3 class="section-title">{{ 'destinationSelectionSectionTitle' | translate }}</h3>
    <mat-divider></mat-divider>
    <mat-form-field appearance="fill" class="full-width">
      <mat-label>{{ 'selectOrganizationalUnitLabel' | translate }}</mat-label>
      <mat-select formControlName="organizationalUnit" (selectionChange)="onOrganizationalUnitChange()">
        <mat-option *ngFor="let unit of availableOrganizationalUnits" [value]="unit['@id']">
          {{ unit.name }}
        </mat-option>
      </mat-select>
      <mat-error *ngIf="taskForm.get('organizationalUnit')?.invalid">{{ 'requiredFieldError' | translate }}</mat-error>
    </mat-form-field>

    <mat-form-field appearance="fill" class="full-width">
      <mat-label>{{ 'selectClassroomLabel' | translate }}</mat-label>
      <mat-select formControlName="selectedChild" (selectionChange)="onChildChange()">
        <mat-option *ngFor="let child of selectedUnitChildren" [value]="child['@id']">
          {{ child.name }}
        </mat-option>
      </mat-select>
    </mat-form-field>

    <mat-form-field appearance="fill" class="full-width">
      <mat-label>{{ 'selectClientsLabel' | translate }}</mat-label>
      <mat-select formControlName="selectedClients" multiple>
        <mat-option (click)="toggleSelectAll()" [selected]="areAllSelected()">
          {{ 'selectAllClients' | translate }}
        </mat-option>
        <mat-option *ngFor="let client of selectedClients" [value]="client.uuid">
          {{ client.name }} ({{ client.ip }})
        </mat-option>
      </mat-select>
    </mat-form-field>

    <mat-form-field appearance="fill" class="full-width">
      <mat-label>Selecciona Clientes</mat-label>
      <mat-select formControlName="selectedClients" multiple>
        <mat-option (click)="toggleSelectAll()" [selected]="areAllSelected()">
          Seleccionar todos
        </mat-option>
        <mat-option *ngFor="let client of selectedClients" [value]="client.uuid">
          {{ client.name }} ({{ client.ip }})
        </mat-option>
      </mat-select>
    </mat-form-field>
  </mat-dialog-content>
</form>

<div class="button-container">
  <button class="submit-button" (click)="saveTask()">{{ 'buttonSave' | translate }}</button>
</div>
