<div class="login-container">
  <div class="login-card">
    <!-- Header con logo SALUD UT -->
    <div class="login-header">
      <img src="/logo_SALUDUT.png" alt="SALUD UT" class="login-logo" />
      <h1>SALUD UT</h1>
      <p class="login-subtitle">Módulo de autorizaciones médicas</p>
    </div>

    <!-- Formulario de login -->
    <form class="login-form" [formGroup]="loginForm" (ngSubmit)="onSubmit()">
      <!-- Mensajes de error -->
      <div class="alert alert-error" *ngIf="errorMessage">
        {{ errorMessage }}
      </div>

      <!-- Campo de usuario -->
      <div class="form-group">
        <label for="username">Usuario:</label>
        <input
          id="username"
          type="text"
          formControlName="username"
          placeholder="Ingrese su usuario"
          [class.error]="username?.invalid && username?.touched"
          autocomplete="username"
        />
        <div class="error-message" *ngIf="username?.invalid && username?.touched">
          {{ getUsernameErrorMessage() }}
        </div>
      </div>

      <!-- Campo de contraseña -->
      <div class="form-group">
        <label for="password">Contraseña:</label>
        <div class="password-input-container">
          <input
            id="password"
            [type]="hidePassword ? 'password' : 'text'"
            formControlName="password"
            placeholder="Ingrese su contraseña"
            [class.error]="password?.invalid && password?.touched"
            autocomplete="current-password"
          />
          <button
            type="button"
            class="password-toggle"
            (click)="togglePasswordVisibility()"
            [title]="hidePassword ? 'Mostrar contraseña' : 'Ocultar contraseña'"
          >
            {{ hidePassword ? 'Mostrar' : 'Ocultar' }}
          </button>
        </div>
        <div class="error-message" *ngIf="password?.invalid && password?.touched">
          {{ getPasswordErrorMessage() }}
        </div>
      </div>

      <!-- Botón de envío -->
      <button
        type="submit"
        class="login-button"
        [disabled]="loginForm.invalid || isLoading"
      >
        <span *ngIf="!isLoading">Iniciar sesión</span>
        <span *ngIf="isLoading" class="loading-spinner">
          <span class="spinner"></span>
          Iniciando sesión...
        </span>
      </button>
    </form>

    <!-- Información adicional -->
    <div class="login-footer">
      <p class="help-text">
        Si tiene problemas para acceder, contacte al administrador del sistema.
      </p>
    </div>
  </div>
</div>
