<div class="container mt-5" style="max-width: 480px;">
  <h2 class="mb-4">Autentificare</h2>

  <div *ngIf="error()" class="alert alert-danger">{{ error() }}</div>

  <form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
    <div class="mb-3">
      <label for="email" class="form-label">Email</label>
      <input id="email" type="email" class="form-control"
             formControlName="email"
             [class.is-invalid]="submitted() && f['email'].invalid">
      <div *ngIf="submitted() && f['email'].invalid" class="invalid-feedback">
        Email obligatoriu si valid.
      </div>
    </div>

    <div class="mb-3">
      <label for="password" class="form-label">Parola</label>
      <input id="password" type="password" class="form-control"
             formControlName="password"
             [class.is-invalid]="submitted() && f['password'].invalid">
      <div *ngIf="submitted() && f['password'].invalid" class="invalid-feedback">
        Parola obligatorie (min. 6 caractere).
      </div>
    </div>

    <button type="submit" class="btn btn-primary w-100" [disabled]="loading()">
      {{ loading() ? 'Se conecteaza...' : 'Conectare' }}
    </button>
  </form>

  <p class="mt-3 text-center">
    Nu ai cont? <a routerLink="/register">Inregistreaza-te</a>
  </p>
</div>
