<app-loading [isLoading]="loading"></app-loading>

<h1 mat-dialog-title>{{ isEditMode ? ('dialogTitleEditUser' | translate) : ('dialogTitleAddUser' | translate) }}</h1>
<mat-dialog-content class="form-container">
  <form [formGroup]="userForm" class="user-form">
    <mat-form-field appearance="fill" class="full-width">
      <mat-label>{{ 'addUserlabelUsername' | translate }}</mat-label>
      <input matInput formControlName="username" required>
    </mat-form-field>
    <mat-form-field appearance="fill" class="full-width">
      <mat-label>{{ 'addUserlabelPassword' | translate }}</mat-label>
      <input matInput formControlName="password" type="password" required>
    </mat-form-field>

    <mat-form-field appearance="fill" class="full-width">
      <mat-label>{{ 'labelRole' | translate }}</mat-label>
      <mat-select formControlName="role" required>
        <mat-option *ngFor="let group of userGroups" [value]="group['@id']">
          {{ group.name }}
        </mat-option>
      </mat-select>
    </mat-form-field>

    <mat-form-field appearance="fill" class="full-width">
      <mat-label>{{ 'labelOrganizationalUnit' | translate }}</mat-label>
      <mat-select multiple formControlName="organizationalUnits">
        <mat-option *ngFor="let unit of organizationalUnits" [value]="unit['@id']">
          {{ unit.name }}
        </mat-option>
      </mat-select>
    </mat-form-field>

    <mat-form-field appearance="fill" class="full-width">
      <mat-label>Vista tarjetas</mat-label>
      <mat-select formControlName="groupsView" required>
        <mat-option *ngFor="let option of views" [value]="option.value">
          {{ option.name }}
        </mat-option>
      </mat-select>
    </mat-form-field>
  </form>
</mat-dialog-content>
<mat-dialog-actions class="action-container">
  <button class="ordinary-button" (click)="onNoClick()">{{ 'buttonCancel' | translate }}</button>
  <button class="submit-button" (click)="onSubmit()" [disabled]="userForm.invalid">{{ isEditMode ? ('buttonEdit' | translate) : ('buttonAdd' | translate) }}</button>
</mat-dialog-actions>