<main id="holder">
  <form [formGroup]="signInForm" tuiAppearance="floating">
    <header>
      <h1>{{"signIn.formTitle"|translate}}</h1>
    </header>

    <main>
      <tui-textfield iconStart="@tui.user">
        <label tuiLabel>{{"signIn.mainInput.label"|translate}}</label>

        <input (input)="checkAuthMethods(signInForm.controls['unameMailPhone'].value)" formControlName="unameMailPhone" tuiInput placeholder="{{'signIn.mainInput.placeholder'|translate}}">
      </tui-textfield>
      @if (signInForm.controls["unameMailPhone"].dirty) {
        @if (signInForm.controls["unameMailPhone"].hasError("required")) {
          <tui-error [error]="'signIn.errors.unameMailPhoneRequired'|translate"></tui-error>
        }
      }

      <tui-textfield iconStart="@tui.key">
        <label tuiLabel>{{"signIn.password.label"|translate}}</label>
        <input formControlName="password" [disabled]="!methods().password" type="password" tuiInput>
        <tui-icon tuiPassword></tui-icon>
      </tui-textfield>
      @if (signInForm.controls["password"].dirty) {
        @if (signInForm.controls["password"].hasError("required")) {
          <tui-error [error]="'signIn.errors.passwordRequired'|translate"></tui-error>
        } @else if (signInForm.controls["password"].hasError("incorrect")) {
          <tui-error [error]="'signIn.errors.passwordIncorrect'|translate"></tui-error>
        }
      }

      <div id="methods">
        <button [disabled]="!methods().email" iconStart="@tui.mail-open" appearance="secondary" tuiButton disabled>{{'signIn.emailButton'|translate}}</button>
        <button [disabled]="!methods().sms" iconStart="@tui.phone" appearance="secondary" tuiButton disabled>{{'signIn.smsButton'|translate}}</button>
      </div>
    </main>

    <footer>
      <button (click)="passwordSignIn(signInForm.controls['unameMailPhone'].value, signInForm.controls['password'].value)" [disabled]="signInForm.invalid || !methods().password" tuiButton>
        {{'signIn.signInButton'|translate}}
      </button>
    </footer>
  </form>
</main>
