<div class="login-container" [ngClass]="isDarkMode ? 'dark-theme' : 'light-theme'" [style.background-image]="'url(' + backgroundImageUrl + ')'">
    <div class="background-overlay"></div>
    
    <div class="theme-toggle">
      <label class="switch">
        <input type="checkbox" [checked]="isDarkMode" (change)="toggleTheme()">
        <span class="slider">
          <i class="icon">{{ isDarkMode ? '🌙' : '☀️' }}</i>
        </span>
      </label>
    </div>

    <div class="login-card">
      <div class="logo-container">
        <img [src]="logo" alt="Logo" class="logo">
      </div>
      <div class="card-header">
        <p class="subtitle">Faça login para continuar</p>
      </div>

      <div class="card-content">
        <!-- 🎯 Seção para usuário já logado -->
        <div *ngIf="isLoggedIn()" class="logged-in-section">
          <div class="alert alert-info">
            <p>👤 Você já está logado!</p>
            <p>Escolha uma opção:</p>
          </div>
          
          <div class="logged-in-actions">
            <button 
              type="button" 
              class="submit-button primary" 
              (click)="goToDashboard()"
            >
              🏠 Ir para Dashboard
            </button>
            
            <button 
              type="button" 
              class="submit-button secondary" 
              (click)="onLogout()"
            >
              🚪 Fazer Logout
            </button>
          </div>
          
          <hr class="divider">
          <p class="or-text">ou faça login com outra conta:</p>
        </div>

        <!-- 🔑 Formulário de login (sempre visível) -->
        <form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
          <div class="form-group">
            <label for="email">Email</label>
            <div class="input-wrapper">
              <input
                id="email"
                type="email"
                formControlName="email"
                placeholder="seu@email.com"
                [class.error]="loginForm.get('email')?.invalid && loginForm.get('email')?.touched"
              >
            </div>
            <div class="error-message" *ngIf="loginForm.get('email')?.invalid && loginForm.get('email')?.touched">
              <span *ngIf="loginForm.get('email')?.hasError('required')">Email é obrigatório</span>
              <span *ngIf="loginForm.get('email')?.hasError('email')">Email inválido</span>
            </div>
          </div>

          <div class="form-group">
            <label for="password">Senha</label>
            <div class="input-wrapper">
              <input
                id="password"
                [type]="hidePassword ? 'password' : 'text'"
                formControlName="password"
                [class.error]="loginForm.get('password')?.invalid && loginForm.get('password')?.touched"
              >
              <button 
                type="button"
                class="toggle-password"
                (click)="hidePassword = !hidePassword"
              >
                {{ hidePassword ? '👁️' : '👁️‍🗨️' }}
              </button>
            </div>
            <div class="error-message" *ngIf="loginForm.get('password')?.invalid && loginForm.get('password')?.touched">
              <span *ngIf="loginForm.get('password')?.hasError('required')">Senha é obrigatória</span>
            </div>
          </div>

          <button 
            type="submit" 
            class="submit-button" 
            [disabled]="loginForm.invalid || isLoading"
            (click)="onSubmit()"
          >
            {{ isLoading ? 'Entrando...' : 'Entrar' }}
          </button>
        </form>

        <!-- 🚨 Mensagem de erro -->
        <div *ngIf="errorMessage" class="alert alert-error">
          {{ errorMessage }}
        </div>

        <div class="additional-links">
          <!-- <a href="/recuperar-senha">Esqueceu sua senha?</a> -->
          <!-- <a href="/cadastro">Criar uma conta</a> -->
        </div>
      </div>
    </div>
  </div>

<!-- <idt-button [variant]="'primary'" [size]="'lg'">Entrar</idt-button> -->