<header class="login-page__header text-center mb-2">
  <h1 id="login-title" class="auth-title mb-3">Iniciar sesion</h1>
  @if (serverError(); as errorMessage) {
      <small class="text-danger">{{ errorMessage }}</small>
    }
</header>

<form
  class="login-page__form d-grid gap-3"
  novalidate
  aria-labelledby="login-title"
  [formGroup]="form"
  (ngSubmit)="onSubmit()"
>
  <div class="d-grid gap-3">
    <label class="visually-hidden" for="login-email">Email</label>
    <app-input
      id="login-email"
      type="email"
      placeholder="Email"
      [value]="form.controls.email.value"
      [invalid]="showControlError('email')"
      (valueChange)="updateEmail($event)"
    />
    @if (getControlError('email'); as errorMessage) {
      <small class="text-danger">{{ errorMessage }}</small>
    }

    <div class="d-grid gap-1">
      <label class="visually-hidden" for="login-password">Contraseña</label>
      <app-input
        id="login-password"
        type="password-toggle"
        placeholder="Contraseña"
        [value]="form.controls.password.value"
        [invalid]="showControlError('password')"
        (valueChange)="updatePassword($event)"
      />
      @if (getControlError('password'); as errorMessage) {
        <small class="text-danger">{{ errorMessage }}</small>
      }
      <div class="text-end">
        <button
          type="button"
          class="login-page__forgot-password btn btn-link p-0 border-0 text-decoration-none"
          (click)="goToRecoverPassword()"
        >
          Olvide mi contraseña
        </button>
      </div>
    </div>
  </div>

  <div class="d-grid gap-2 text-center">
    <app-button
      type="submit"
      hostClass="w-100 d-block"
      buttonClass="w-100"
      [disabled]="isSubmitting()"
    >
      {{ isSubmitting() ? 'Ingresando...' : 'Ingresar' }}
    </app-button>

    <app-button
      type="button"
      variant="borderless"
      hostClass="w-100 d-block text-center"
      buttonClass="login-page__create-account px-3 py-2"
      [disabled]="isSubmitting()"
      (click)="goToRegister()"
    >
      Crear cuenta
    </app-button>
  </div>
</form>

<div class="login-page__divider d-flex align-items-center justify-content-center gap-3 my-4" aria-hidden="true">
  <span class="login-page__divider-line flex-grow-1"></span>
  <span class="login-page__divider-dot rounded-circle border flex-shrink-0"></span>
  <span class="login-page__divider-line flex-grow-1"></span>
</div>

<app-button
  type="button"
  variant="neutral-outline"
  hostClass="w-100 d-block"
  buttonClass="w-100 d-inline-flex align-items-center justify-content-center gap-2 py-2 fw-semibold"
  [disabled]="isSubmitting()"
  (click)="loginWithGoogle()"
>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 48 48"
    width="18"
    height="18"
    aria-hidden="true"
  >
    <path
      fill="#FFC107"
      d="M43.61 20.08H42V20H24v8h11.3C33.65 32.66 29.19 36 24 36c-6.63 0-12-5.37-12-12s5.37-12 12-12c3.06 0 5.84 1.15 7.96 3.04l5.66-5.66C34.09 6.05 29.3 4 24 4C12.95 4 4 12.95 4 24s8.95 20 20 20s20-8.95 20-20c0-1.34-.14-2.65-.39-3.92z"
    />
    <path
      fill="#FF3D00"
      d="M6.31 14.69l6.57 4.82C14.66 15.1 18.96 12 24 12c3.06 0 5.84 1.15 7.96 3.04l5.66-5.66C34.09 6.05 29.3 4 24 4C16.32 4 9.66 8.34 6.31 14.69z"
    />
    <path
      fill="#4CAF50"
      d="M24 44c5.2 0 9.9-1.99 13.47-5.23l-6.19-5.24C29.2 35.11 26.72 36 24 36c-5.17 0-9.62-3.32-11.28-7.95l-6.52 5.02C9.51 39.56 16.24 44 24 44z"
    />
    <path
      fill="#1976D2"
      d="M43.61 20.08H42V20H24v8h11.3c-.79 2.37-2.31 4.38-4.28 5.53l.01-.01l6.19 5.24C36.78 39.13 44 34 44 24c0-1.34-.14-2.65-.39-3.92z"
    />
  </svg>
  <span>Continuar con Google</span>
</app-button>
