@if (showDialog()) {
  <div class="login-overlay" (click)="close()">
    <div class="login-dialog" (click)="$event.stopPropagation()">
      <button class="close-btn" (click)="close()">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M18 6L6 18M6 6l12 12"/>
        </svg>
      </button>

      <div class="login-icon">
        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
          <path d="M12 2 3 6v6c0 5 4 8.7 9 10 5-1.3 9-5 9-10V6l-9-4z"/>
        </svg>
      </div>

      <h2>{{ 'adminAuth.loginRequired' | translate }}</h2>
      <p class="login-desc">{{ 'adminAuth.loginDescription' | translate }}</p>

      @if (status() === 'checking') {
        <div class="login-status checking">
          <div class="spinner"></div>
          <span>{{ 'adminAuth.checking' | translate }}</span>
        </div>
      } @else {
        <button class="telegram-btn" (click)="openAppLogin()">
          {{ 'adminAuth.loginWithApp' | translate }}
        </button>

        <div class="qr-section">
          <p class="qr-hint">{{ 'adminAuth.orScanQr' | translate }}</p>

          @switch (qrStatus()) {
            @case ('loading') {
              <div class="qr-container qr-loading">
                <div class="spinner"></div>
              </div>
            }
            @case ('ready') {
              <div class="qr-container">
                <img [src]="'https://api.qrserver.com/v1/create-qr-code/?size=180x180&data=' + encodedQrUrl()"
                     alt="QR Code"
                     width="180"
                     height="180"
                     loading="eager" />
              </div>
            }
            @case ('expired') {
              <div class="qr-container qr-expired" (click)="refreshQr()">
                <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <path d="M1 4v6h6M23 20v-6h-6"/>
                  <path d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15"/>
                </svg>
                <span>{{ 'adminAuth.qrExpired' | translate }}</span>
              </div>
            }
            @case ('error') {
              <div class="qr-container qr-error" (click)="refreshQr()">
                <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <path d="M1 4v6h6M23 20v-6h-6"/>
                  <path d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15"/>
                </svg>
                <span>{{ 'adminAuth.qrError' | translate }}</span>
              </div>
            }
          }
        </div>

        <p class="login-note">{{ 'adminAuth.loginNote' | translate }}</p>
      }
    </div>
  </div>
}