<form [formGroup]="userForm">

  <h3 mat-dialog-title>Add user</h3>

  <div mat-dialog-content>
    <div class="row">

      <div class="col-md-6 col-12">

        <mat-form-field class="w-100 standalone-field">
          <span
            matPrefix
            matTooltip="User's username"
            class="d-flex flex-nowrap align-items-center justify-content-between me-2">
            <mat-icon>person</mat-icon>
            <span class="text-muted">|</span>
          </span>
          <input
            matInput
            type="text"
            name="-"
            autocomplete="off"
            placeholder="Username"
            formControlName="username"
            required />
          <mat-error>{{CommonErrorMessages.username}}</mat-error>
        </mat-form-field>

      </div>

      <div class="col-md-6 col-12">

        <mat-form-field class="w-100 standalone-field">
          <span
            matPrefix
            matTooltip="User's password"
            class="d-flex flex-nowrap align-items-center justify-content-between me-2">
            <mat-icon>password</mat-icon>
            <span class="text-muted">|</span>
          </span>
          <input
            matInput
            [type]="showPassword ? 'text' : 'password'"
            autocomplete="new-password"
            formControlName="password"
            placeholder="Password"
            [pattern]="CommonRegEx.password"
            required />
          <button
            mat-icon-button
            matSuffix
            tabIndex="-1"
            type="button"
            (click)="showPassword = !showPassword">
            <mat-icon>{{showPassword ? 'visibility_off' : 'visibility'}}</mat-icon>
          </button>
          <mat-error>{{CommonErrorMessages.password}}</mat-error>
        </mat-form-field>

      </div>

      <div class="col-md-6 col-12">

        <mat-form-field class="w-100 standalone-field">
          <span
            matPrefix
            matTooltip="User's full name (optional)"
            class="d-flex flex-nowrap align-items-center justify-content-between me-2">
            <mat-icon>edit</mat-icon>
            <span class="text-muted">|</span>
          </span>
          <input
            matInput
            type="text"
            name="-"
            autocomplete="off"
            formControlName="name"
            placeholder="Full name (optional)" />
        </mat-form-field>

      </div>

      <div class="col-md-6 col-12">

        <mat-form-field class="w-100 standalone-field">
          <span
            matPrefix
            matTooltip="User's email address (optional)"
            class="d-flex flex-nowrap align-items-center justify-content-between me-2">
            <mat-icon>mail</mat-icon>
            <span class="text-muted">|</span>
          </span>
          <input
            matInput
            type="text"
            name="-"
            autocomplete="off"
            formControlName="email"
            [pattern]="CommonRegEx.email"
            placeholder="Email address (optional)" />
          <mat-error>{{CommonErrorMessages.email}}</mat-error>
        </mat-form-field>

      </div>

      <div class="col-12">

        <mat-form-field class="w-100">
          <span
            matPrefix
            matTooltip="Role(s) user should be associated with"
            class="d-flex flex-nowrap align-items-center justify-content-between me-2">
            <mat-icon>shield</mat-icon>
            <span class="text-muted">|</span>
          </span>
          <mat-select
            formControlName="role"
            multiple
            placeholder="Role (optional)">
            <mat-select-trigger>
              {{userForm.value.role ? userForm.value.role[0] : ''}}
              <span *ngIf="userForm.value.role?.length > 1">
                + {{userForm.value.role.length - 1}} more
              </span>
            </mat-select-trigger>
            <mat-option
              class="multiline-mat-option"
              *ngFor="let role of data"
              [value]="role.name">
              <span class="d-block name-line">{{role.name}}</span>
              <span class="d-block description-line">{{role.description}}</span>
            </mat-option>
          </mat-select>
        </mat-form-field>

      </div>

    </div>

  </div>
  <div mat-dialog-actions [align]="'end'">

    <button
      mat-button
      mat-dialog-close>
      Cancel
    </button>

    <button
      mat-flat-button
      color="primary"
      (click)="createUser()"
      [disabled]="isLoading"
      type="submit">
      Save
    </button>

  </div>
</form>
