<ng-container *transloco="let t; prefix: 'auth.login'">
  <div class="login-container">
    <div class="login-card-wrapper">
      <div class="login-card-border">
        <div class="login-card">
          <div class="login-header">
            <div class="logo-wrapper">
              <svg class="logo-icon" viewBox="0 0 126 126" fill="var(--primary-color)" xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M59 4.79297C71.5051 11.5557 80 24.7854 80 40C80 40.5959 79.987 41.1888 79.9609 41.7783C79.8609 44.0406 81.7355 46 84 46C106.091 46 124 63.9086 124 86C124 108.091 106.091 126 84 126H10C4.47715 126 0 121.523 0 116V39.0068L0.0126953 38.9941C0.357624 25.0252 7.86506 12.8347 19 5.95215V63.832C19 64.8345 20.0676 65.4391 20.9121 64.9902L21.0771 64.8867L38.2227 52.3428C38.6819 52.0068 39.3064 52.0068 39.7656 52.3428L56.9229 64.8945L57.0879 64.998C57.9324 65.447 59 64.8423 59 63.8398V4.79297Z"/>
                <path
                  d="M40 0C43.8745 0 47.6199 0.552381 51.1631 1.58008V50.9697L44.3926 46.0176L44.0879 45.8037C40.9061 43.6679 36.7098 43.7393 33.5957 46.0176L26.8369 50.9619V2.21875C30.9593 0.782634 35.3881 0 40 0Z"
                  fill="white"/>
              </svg>
            </div>
            <h1 class="login-title">{{ t('title') }}</h1>
            <p class="login-subtitle">{{ t('subtitle') }}</p>
          </div>

          @if (infoMessage) {
            <div class="info-message" style="margin-bottom: 1rem;">
              <p-message severity="info">{{ infoMessage }}</p-message>
            </div>
          }

          @if (errorMessage) {
            <div class="error-message" style="margin-bottom: 1rem;">
              <p-message severity="error">{{ errorMessage }}</p-message>
            </div>
          }

          @if (showLocalLogin) {
            <form class="login-form" #loginForm="ngForm" (ngSubmit)="login()">
              <div class="form-field">
                <label for="username" class="form-label">
                  <i class="pi pi-user"></i>
                  <span>{{ t('usernameLabel') }}</span>
                </label>
                <input
                  fluid
                  pInputText
                  id="username"
                  name="username"
                  required
                  [(ngModel)]="username"
                  [placeholder]="t('usernamePlaceholder')"
                  class="form-input"
                  autocomplete="username"
                />
              </div>

              <div class="form-field">
                <label for="password" class="form-label">
                  <i class="pi pi-lock"></i>
                  <span>{{ t('passwordLabel') }}</span>
                </label>
                <p-password
                  id="password"
                  name="password"
                  required
                  [(ngModel)]="password"
                  [feedback]="false"
                  [placeholder]="t('passwordPlaceholder')"
                  [toggleMask]="true"
                  [fluid]="true"
                  autocomplete="current-password"
                ></p-password>
              </div>

              <p-button
                fluid
                type="submit"
                [label]="t('signIn')"
                icon="pi pi-sign-in"
                [disabled]="!loginForm.valid || !username || !password"
                class="login-button">
              </p-button>

              @if (oidcEnabled) {
                <div class="divider">
                  <span>{{ t('orContinueWith') }}</span>
                </div>

                <p-button
                  fluid
                  severity="secondary"
                  [label]="isOidcLoginInProgress ? t('redirectingTo', {provider: oidcName}) : oidcName"
                  [icon]="isOidcLoginInProgress ? 'pi pi-spin pi-spinner' : 'pi pi-id-card'"
                  [disabled]="isOidcLoginInProgress"
                  (click)="loginWithOidc()"
                  class="oidc-button"/>
              }
            </form>
          } @else {
            @if (oidcEnabled) {
              <div class="login-form">
                <p-button
                  fluid
                  severity="secondary"
                  [label]="isOidcLoginInProgress ? t('redirectingTo', {provider: oidcName}) : oidcName"
                  [icon]="isOidcLoginInProgress ? 'pi pi-spin pi-spinner' : 'pi pi-id-card'"
                  [disabled]="isOidcLoginInProgress"
                  (click)="loginWithOidc()"
                  class="oidc-button"/>
              </div>
            }
          }
        </div>
      </div>
    </div>
  </div>
</ng-container>
