qr_vitanova/src/app/pages/fastcheck-page/fastcheck-page.html

<div class="page">
  <div class="card">

    <div class="card__header">
      <h1 class="card__title">Оплата Фастчеком</h1>
      <p class="card__subtitle">Введите данные Фастчека или создайте новый</p>
    </div>

    <div class="card__body">

      <!-- Fastcheck number + new -->
      <div class="field">
        <label class="field__label" for="fcNumber">Номер Фастчека</label>
        <div class="row">
          <input
            id="fcNumber"
            type="text"
            class="input"
            [ngModel]="fastcheckNumber()"
            (ngModelChange)="fastcheckNumber.set($event)"
            placeholder="1234-5678-0001"
            inputmode="numeric"
            autocomplete="off"
          />
          <a class="btn btn--ghost" routerLink="/new" aria-label="Создать новый Фастчек">Новый</a>
        </div>
      </div>

      <!-- Amount -->
      <div class="field">
        <label class="field__label" for="fcAmount">Сумма</label>
        <div class="input-wrap">
          <span class="input-wrap__prefix">₽</span>
          <input
            id="fcAmount"
            type="number"
            class="input-wrap__input"
            [ngModel]="fastcheckAmount()"
            (ngModelChange)="onAmountChange($event)"
            min="1"
            step="1"
            inputmode="numeric"
            placeholder="0"
          />
        </div>
      </div>

      <!-- Code -->
      <div class="field">
        <label class="field__label" for="fcCode">Код</label>
        <input
          id="fcCode"
          type="text"
          class="input"
          [ngModel]="fastcheckCode()"
          (ngModelChange)="fastcheckCode.set($event)"
          placeholder="0000"
          inputmode="numeric"
          maxlength="8"
          autocomplete="one-time-code"
        />
        @if (error()) {
          <span class="field__error">{{ error() }}</span>
        }
      </div>

      <button class="pay-btn" type="button" (click)="pay()">
        <span class="pay-btn__icon">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
               stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
            <rect x="1" y="4" width="22" height="16" rx="2" ry="2" />
            <line x1="1" y1="10" x2="23" y2="10" />
          </svg>
        </span>
        Оплатить
      </button>
    </div>

    <div class="card__footer">
      <span class="secure-badge">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"
             stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
        </svg>
        Защищённое соединение
      </span>
    </div>
  </div>
</div>

<!-- Telegram sign-in popup -->
@if (popupOpen()) {
  <div class="modal" (click)="closePopup()">
    <div class="modal__card" (click)="$event.stopPropagation()">
      <button class="modal__close" type="button" (click)="closePopup()" aria-label="Закрыть">×</button>

      @if (paid()) {
        <div class="modal__success">
          <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="#16a34a"
               stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
            <path d="M20 6L9 17l-5-5" />
          </svg>
          <h2 class="modal__title">Оплачено</h2>
          <p class="modal__sub">Фастчек успешно принят.</p>
        </div>
      } @else {
        <h2 class="modal__title">Войти через Telegram</h2>
        <p class="modal__sub">Отсканируйте QR или откройте ссылку</p>

        <div class="qr">
          @if (popupLoading() && !webSessionId()) {
            <div class="qr__placeholder">Загрузка…</div>
          } @else if (webSessionId()) {
            <img [src]="qrUrl()" width="240" height="240" alt="QR Telegram" />
          }
        </div>

        @if (webSessionId()) {
          <a class="tg-link" [href]="telegramLink()" target="_blank" rel="noopener">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
              <path d="M9.04 15.65l-.36 4.06c.51 0 .73-.22.99-.48l2.38-2.27 4.93 3.6c.9.5 1.55.24 1.79-.83l3.24-15.18h.01c.29-1.34-.48-1.86-1.36-1.54L1.13 9.66c-1.32.5-1.3 1.23-.22 1.56l4.92 1.53L17.27 5.6c.54-.34 1.03-.15.62.19" />
            </svg>
            Открыть в Telegram
          </a>
        }

        @if (popupLoading() && webSessionId()) {
          <p class="modal__hint">Подтверждение оплаты…</p>
        } @else if (webSessionId()) {
          <p class="modal__hint">Ожидание входа…</p>
        }

        @if (popupError()) {
          <p class="modal__error">{{ popupError() }}</p>
        }
      }
    </div>
  </div>
}