<ng-container *transloco="let t; prefix:'change-email'">
  <app-setting-item [title]="t('email-title')" [canEdit]="canEdit()" [isEditMode]="isEditMode" (isEditModeChange)="updateEditMode($event)">
    <ng-template #view>
      <span>{{censoredEmail() | defaultValue}}</span>
      @if(emailConfirmed) {
        <i class="fa-solid fa-circle-check ms-1 confirm-icon" aria-hidden="true" [ngbTooltip]="t('email-confirmed')"></i>
        <span class="visually-hidden">{{t('email-confirmed')}}</span>
      } @else {
        <i class="fa-solid fa-exclamation-circle ms-1 confirm-icon error" aria-hidden="true" [ngbTooltip]="t('email-not-confirmed')"></i>
        <span class="visually-hidden">{{t('email-not-confirmed')}}</span>
      }
    </ng-template>

    <ng-template #edit>
      @if (errors.length > 0) {
        <div class="alert alert-danger" role="alert">
          @for(error of errors; track error) {
            <div>{{error}}</div>
          })
        </div>
      }
      <form [formGroup]="form">
        @if(!hasValidEmail) {
          <div class="alert alert-warning" role="alert">
            {{t('has-invalid-email')}}
          </div>
        }
        <div class="mb-3">
          <label for="email" class="form-label">{{t('email-label')}}</label>
          @if(form.get('email'); as formControl) {
            <input class="form-control custom-input" type="email" id="email" formControlName="email"
                   [class.is-invalid]="formControl.invalid && formControl.touched">
            @if (formControl.errors) {
              <div id="email-validations" class="invalid-feedback">
                @if (formControl.errors.required) {
                  <div>{{t('required-field')}}</div>
                }
                @if (formControl.errors.email) {
                  <div>{{t('valid-email')}}</div>
                }
              </div>
            }
          }
        </div>

        <div class="mb-3">
          <label for="password" class="form-label">{{t('current-password-label')}}</label>
          @if (form.get('password'); as formControl) {
            <input class="form-control custom-input" type="password" id="password" formControlName="password"
                   [class.is-invalid]="formControl.invalid && formControl.touched">
            @if (formControl.errors) {
              <div id="password-validations" class="invalid-feedback">
                @if (formControl.errors.required) {
                  <div>{{t('required-field')}}</div>
                }
              </div>
            }
          }
        </div>

        <div class="col-auto d-flex d-md-block justify-content-sm-center text-md-end mb-3">
          <button type="button" class="flex-fill btn btn-secondary me-2" aria-describedby="email-card" (click)="resetForm()">{{t('reset')}}</button>
          <button type="submit" class="flex-fill btn btn-primary" aria-describedby="email-card" (click)="saveForm()" [disabled]="!form.valid || !(form.dirty || form.touched)">{{t('save')}}</button>
        </div>
      </form>
      @if (emailLink !== '') {
        <h4>{{t('email-updated-title')}}</h4>
        <p>{{t('email-updated-description')}}</p>
        <a class="email-link" href="{{emailLink}}" target="_blank" rel="noopener noreferrer">{{t('setup-user-account')}}</a>
        <app-api-key [title]="t('invite-url-label')" [tooltipText]="t('invite-url-tooltip')" [hideData]="false" [key]="emailLink" />
      }
    </ng-template>
  </app-setting-item>

</ng-container>
