<div class="login-container star-field">
  <div class="login-left">
    <div class="brand-section">
      <div class="moon-icon">
        <img src="assets/moon-crescent.svg" alt="Moon" width="56" height="56" />
      </div>
      <h1>Moon ERP</h1>
      <p>{{ 'APP.SUBTITLE' | translate }}</p>
    </div>
  </div>

  <div class="login-right">
    <div class="lang-toggle">
      <button
        type="button"
        class="lang-btn"
        (click)="toggleLang()"
      >
        {{ langService.currentLang() === 'ar' ? 'EN' : 'عربي' }}
      </button>
    </div>

    <div class="login-form-wrapper">
      <h2>{{ 'AUTH.LOGIN' | translate }}</h2>

      @if (error$ | async; as error) {
        <p-message severity="error" [text]="error" styleClass="w-full mb-3" />
      }

      <form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
        <div class="form-field">
          <label for="email">{{ 'AUTH.EMAIL' | translate }}</label>
          <input
            pInputText
            id="email"
            type="email"
            formControlName="email"
            [placeholder]="'AUTH.EMAIL' | translate"
            class="w-full"
            autocomplete="email"
          />
          @if (loginForm.get('email')?.touched && loginForm.get('email')?.hasError('required')) {
            <small class="p-error">{{ 'COMMON.REQUIRED' | translate }}</small>
          }
          @if (loginForm.get('email')?.touched && loginForm.get('email')?.hasError('email')) {
            <small class="p-error">{{ 'AUTH.EMAIL' | translate }}</small>
          }
        </div>

        <div class="form-field">
          <label for="password">{{ 'AUTH.PASSWORD' | translate }}</label>
          <p-password
            id="password"
            formControlName="password"
            [placeholder]="'AUTH.PASSWORD' | translate"
            [toggleMask]="true"
            [feedback]="false"
            styleClass="w-full"
            inputStyleClass="w-full"
            autocomplete="current-password"
          />
          @if (loginForm.get('password')?.touched && loginForm.get('password')?.hasError('required')) {
            <small class="p-error">{{ 'COMMON.REQUIRED' | translate }}</small>
          }
        </div>

        <div class="form-field remember-row">
          <p-checkbox
            formControlName="remember"
            [binary]="true"
            inputId="remember"
          />
          <label for="remember" class="remember-label">{{ 'AUTH.REMEMBER_ME' | translate }}</label>
        </div>

        <p-button
          type="submit"
          [label]="(loading$ | async) ? ('AUTH.LOGGING_IN' | translate) : ('AUTH.LOGIN_BUTTON' | translate)"
          [loading]="!!(loading$ | async)"
          styleClass="w-full login-btn"
          [disabled]="!!(loading$ | async)"
        />
      </form>

      <div class="register-link">
        <span>{{ 'LOGIN.NO_ACCOUNT' | translate }}</span>
        <a routerLink="/register">{{ 'LOGIN.REGISTER_LINK' | translate }}</a>
      </div>
    </div>
  </div>
</div>
