src/app/authentication/authentication.component.html

<div class="login-wrapper">
  <div class="login-container">
    <!-- Left side image -->
    <div class="login-image">
      <img src="assets/images/lion1.png" alt="Login Illustration" class="bgImage"/>
      <img src="assets/images/pykara-logo.png" alt="Pykara Logo" class="logo" />
    </div>

    <!-- Right side form -->
    <div class="login-box">

      <div class="logo-header">
        <span class="py-learn-text">Py Learn</span>
      </div>

      <h2>Sign in</h2>
      <p class="subtitle">Use your Pykara account</p>

      <div *ngIf="!isLoggedIn">
        <input type="text" [(ngModel)]="username" placeholder="Email or phone" />
        <div class="password-field">
          <input [type]="showPassword ? 'text' : 'password'"
                 [(ngModel)]="password"
                 placeholder="Password" />
          <span class="toggle-password" (click)="togglePasswordVisibility()">
            <i class="{{ showPassword ? 'fas fa-eye' : 'fas fa-eye-slash' }}"></i>
            <!-- {{ showPassword ? '👁️' : '🙈' }}-->
          </span>
        </div>

        <p *ngIf="errorMessage" class="error">{{ errorMessage }}</p>

        <button (click)="login()">Login</button>
      </div>

      <div class="language-switcher">
        <label for="lang-select">Language:</label>
        <select id="lang-select">
          <option value="en">English</option>
          <option value="fr">Français</option>
          <option value="sv">Svenska</option>
          <option value="de">Deutsch</option>
        </select>
      </div>
    </div>
  </div>
</div>