<section class="perfil-page">
  <span class="page-blob blob-1" aria-hidden="true"></span>
  <span class="page-blob blob-2" aria-hidden="true"></span>
  <span class="page-blob blob-3" aria-hidden="true"></span>
  <span class="page-blob blob-4" aria-hidden="true"></span>

  <div class="container-geral-responsive">
    <div class="geral-card">
      <div class="geral-header">
        <div class="header-row-top">
          <div class="title-badge">
            <i class="bi bi-person-circle"></i> PERFIL
          </div>

          <div class="header-title">
            <h5 class="title mb-0">MEU PERFIL</h5>
            <small class="subtitle">Atualize seus dados e credenciais de acesso</small>
          </div>

          <div class="header-actions"></div>
        </div>
      </div>

      <div class="geral-body">
        <div class="perfil-sections">
          <div class="perfil-section-card">
            <div class="section-header">
              <h2>Informação de perfil</h2>
            </div>

            <div class="form-alert error" *ngIf="profileError">
              {{ profileError }}
            </div>
            <div class="form-alert success" *ngIf="profileSuccess">
              {{ profileSuccess }}
            </div>

            <form class="profile-form" [formGroup]="profileForm" (ngSubmit)="onSaveProfile()" novalidate>
              <div class="form-grid">
                <div class="form-field">
                  <label for="profileNome">Nome</label>
                  <input
                    id="profileNome"
                    type="text"
                    class="form-control"
                    formControlName="nome"
                  />
                  <small class="field-error" *ngIf="hasProfileFieldError('nome', 'required')">
                    Nome é obrigatório.
                  </small>
                  <small class="field-error" *ngIf="hasProfileFieldError('nome', 'minlength')">
                    Nome deve ter pelo menos 2 caracteres.
                  </small>
                </div>

                <div class="form-field">
                  <label for="profileEmail">Email</label>
                  <input
                    id="profileEmail"
                    type="email"
                    class="form-control"
                    formControlName="email"
                  />
                  <small class="field-error" *ngIf="hasProfileFieldError('email', 'required')">
                    Email é obrigatório.
                  </small>
                  <small class="field-error" *ngIf="hasProfileFieldError('email', 'email')">
                    Email inválido.
                  </small>
                </div>
              </div>

              <div class="section-actions">
                <button
                  type="submit"
                  class="btn btn-brand btn-sm"
                  [disabled]="loadingProfile || savingProfile || profileForm.invalid"
                >
                  <span class="spinner-border spinner-border-sm me-2" *ngIf="savingProfile"></span>
                  {{ savingProfile ? 'SALVANDO...' : 'SALVAR' }}
                </button>
              </div>
            </form>
          </div>

          <div class="perfil-section-card">
            <div class="section-header">
              <h2>Atualizar senha</h2>
            </div>

            <div class="form-alert error" *ngIf="passwordError">
              {{ passwordError }}
            </div>
            <div class="form-alert success" *ngIf="passwordSuccess">
              {{ passwordSuccess }}
            </div>

            <form class="profile-form" [formGroup]="passwordForm" (ngSubmit)="onChangePassword()" novalidate>
              <div class="form-grid">
                <div class="form-field">
                  <label for="currentPassword">Credencial atual</label>
                  <input
                    id="currentPassword"
                    type="password"
                    class="form-control"
                    formControlName="credencialAtual"
                  />
                  <small class="field-error" *ngIf="hasPasswordFieldError('credencialAtual', 'required')">
                    Credencial atual é obrigatória.
                  </small>
                </div>

                <div class="form-field">
                  <label for="newPassword">Nova credencial</label>
                  <input
                    id="newPassword"
                    type="password"
                    class="form-control"
                    formControlName="novaCredencial"
                  />
                  <small class="field-error" *ngIf="hasPasswordFieldError('novaCredencial', 'required')">
                    Nova credencial é obrigatória.
                  </small>
                  <small class="field-error" *ngIf="hasPasswordFieldError('novaCredencial', 'minlength')">
                    Nova credencial deve ter pelo menos 8 caracteres.
                  </small>
                </div>

                <div class="form-field">
                  <label for="confirmNewPassword">Confirmar sua credencial nova</label>
                  <input
                    id="confirmNewPassword"
                    type="password"
                    class="form-control"
                    formControlName="confirmarNovaCredencial"
                  />
                  <small class="field-error" *ngIf="hasPasswordFieldError('confirmarNovaCredencial', 'required')">
                    Confirmação da nova credencial é obrigatória.
                  </small>
                  <small class="field-error" *ngIf="passwordMismatch">
                    A nova credencial e a confirmação precisam ser iguais.
                  </small>
                </div>
              </div>

              <div class="section-actions">
                <button type="submit" class="btn btn-brand btn-sm" [disabled]="savingPassword || passwordForm.invalid">
                  <span class="spinner-border spinner-border-sm me-2" *ngIf="savingPassword"></span>
                  {{ savingPassword ? 'SALVANDO...' : 'SALVAR' }}
                </button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
