<form [formGroup]="profileForm" class="profile-form" (ngSubmit)="onSubmit()">
  <div class="form-group">
    <label>Nombre y Apellido:</label>
    <app-input
      type="text"
      [value]="profileForm.controls['fullName'].value"
      (valueChange)="profileForm.controls['fullName'].setValue($event)"
    ></app-input>
    @if (getControlError('fullName'); as errorMessage) {
      <small class="text-danger">{{ errorMessage }}</small>
    }
  </div>
  
  <div class="form-group">
    <label>Email:</label>
    <app-input
      type="email"
      [value]="profileForm.controls['email'].value"
      (valueChange)="profileForm.controls['email'].setValue($event)"
    ></app-input>
    @if (getControlError('email'); as errorMessage) {
      <small class="text-danger">{{ errorMessage }}</small>
    }
  </div>
  
  <div class="form-group">
    <label>DNI:</label>
    <app-input
      type="text"
      [value]="profileForm.controls['dni'].value"
      (valueChange)="profileForm.controls['dni'].setValue($event)"
    ></app-input>
    @if (getControlError('dni'); as errorMessage) {
      <small class="text-danger">{{ errorMessage }}</small>
    }
  </div>
  
  <div class="form-group">
    <label>Teléfono:</label>
    <app-input
      type="text"
      [value]="profileForm.controls['phone'].value"
      (valueChange)="profileForm.controls['phone'].setValue($event)"
    ></app-input>
    @if (getControlError('phone'); as errorMessage) {
      <small class="text-danger">{{ errorMessage }}</small>
    }
  </div>
  
  <div class="form-group">
    <label>Contraseña (dejar en blanco para no modificar):</label>
    <app-input
      type="password"
      [value]="profileForm.controls['password'].value"
      (valueChange)="profileForm.controls['password'].setValue($event)"
    ></app-input>
    @if (getControlError('password'); as errorMessage) {
      <small class="text-danger">{{ errorMessage }}</small>
    }
  </div>
  
  <div class="form-actions mt-3">
    <app-button type="button" variant="cancel" hostClass="action-btn" buttonClass="w-100" (click)="onCancel()">Cancelar</app-button>
    <app-button type="submit" variant="primary" hostClass="action-btn" buttonClass="w-100" [disabled]="isSubmitting()">Guardar</app-button>
  </div>
</form>
