<kendo-dialog title="Create User Account" (close)="onCancel()" [width]="520" [maxWidth]="'95vw'" [maxHeight]="'90vh'">

  <!-- STEP 1: Form -->
  <ng-container *ngIf="step === 'form'">
    <p class="k-mb-4">Creating account for <strong>{{ memberName }}</strong></p>

    <form [formGroup]="form" (ngSubmit)="onSubmit()" class="k-form k-form-vertical">

      <kendo-formfield>
        <kendo-label text="Login Email *"></kendo-label>
        <kendo-textbox formControlName="email"></kendo-textbox>
        <kendo-formerror *ngIf="form.get('email')?.errors?.['required']">Email is required.</kendo-formerror>
        <kendo-formerror *ngIf="form.get('email')?.errors?.['email']">Invalid email address.</kendo-formerror>
      </kendo-formfield>

      <kendo-formfield class="k-mt-3">
        <kendo-label text="Roles *"></kendo-label>
        <kendo-multiselect
          formControlName="roles"
          [data]="roleOptions"
          textField="label" valueField="value" [valuePrimitive]="true"
          placeholder="Select role(s)">
        </kendo-multiselect>
      </kendo-formfield>

      <kendo-formfield class="k-mt-3">
        <kendo-label text="Language"></kendo-label>
        <kendo-dropdownlist
          formControlName="languagePreference"
          [data]="langOptions" textField="label" valueField="value"
          [valuePrimitive]="true">
        </kendo-dropdownlist>
      </kendo-formfield>

      <p *ngIf="errorMessage" class="k-color-error k-mt-3">{{ errorMessage }}</p>

    </form>

    <kendo-dialog-actions>
      <button kendoButton (click)="onCancel()">Cancel</button>
      <button kendoButton themeColor="primary" (click)="onSubmit()" [disabled]="isLoading">
        <span *ngIf="isLoading">...</span>
        Create Account
      </button>
    </kendo-dialog-actions>
  </ng-container>

  <!-- STEP 2: Success — show temp password -->
  <ng-container *ngIf="step === 'success'">
    <div class="k-text-center k-p-4">
      <p class="k-font-size-lg k-mb-2">Account created!</p>
      <p class="k-mb-4">Share this temporary password with <strong>{{ memberName }}</strong>.</p>

      <div class="k-d-flex k-justify-content-center k-align-items-center k-gap-2 k-mb-3">
        <code class="k-font-size-lg k-border k-p-2 k-rounded">{{ tempPassword }}</code>
        <button kendoButton (click)="copyPassword()">{{ copied ? 'Copied!' : 'Copy' }}</button>
      </div>

      <p class="k-color-warning k-font-weight-bold">
        Warning: This password will not be shown again.
      </p>
    </div>

    <kendo-dialog-actions>
      <button kendoButton themeColor="primary" (click)="onDone()">Done</button>
    </kendo-dialog-actions>
  </ng-container>

</kendo-dialog>
