<div class="ac">
  <div class="ac__inner">

    <!-- Header: church + auto-selected current day -->
    <header class="ac__head">
      <span class="ac__eyebrow">River of Life · 生命河靈糧堂</span>
      <h1 class="ac__title">Sunday Worship Count<span>主日崇拜人數統計</span></h1>
      <div class="ac__date">{{ worshipSunday | date:'fullDate' }}</div>
      <div class="ac__status" [class.is-on]="connected">
        <span class="ac__dot"></span>
        {{ connected ? 'Live · 即時連線中' : 'Connecting… · 連線中' }}
      </div>
      <div class="ac__readonly" *ngIf="!isSunday">
        View only · 唯讀 — counting opens on Sunday · 主日開放計數
      </div>
    </header>

    <!-- One row per age group, each with its own big +/- controls -->
    <section class="ac__rows">
      <article class="row" *ngFor="let row of rows">
        <div class="row__label">
          <span class="row__en">{{ row.labelEn }}</span>
          <span class="row__zh">{{ row.labelZh }}</span>
        </div>

        <div class="row__controls">
          <button type="button" class="btn btn--minus"
                  [disabled]="!isSunday || display(row.key) === 0"
                  (click)="bump(row.key, -1)"
                  aria-label="Decrease">−</button>

          <button type="button" class="row__num" [attr.data-key]="row.key"
                  [disabled]="!isSunday"
                  (click)="openEditor(row)"
                  [attr.aria-label]="'Edit ' + row.labelEn + ' count'">
            {{ display(row.key) }}
          </button>

          <button type="button" class="btn btn--plus"
                  [disabled]="!isSunday"
                  (click)="bump(row.key, 1)"
                  aria-label="Increase">+</button>
        </div>
      </article>
    </section>

    <!-- Live grand total -->
    <footer class="ac__total">
      <span class="ac__total-label">Total · 總人數</span>
      <span class="ac__total-num">
        {{ display('adult') + display('youth') + display('kid') }}
      </span>
    </footer>

  </div>

  <!-- Direct-entry dialog: tap a number to type an exact count -->
  <div class="edit" *ngIf="editing" (click)="cancelEditor()">
    <div class="edit__card" (click)="$event.stopPropagation()">
      <div class="edit__label">
        <span class="edit__en">{{ editing.labelEn }}</span>
        <span class="edit__zh">{{ editing.labelZh }}</span>
      </div>

      <input class="edit__input" type="number" inputmode="numeric" min="0" step="1"
             [(ngModel)]="editValue" autofocus
             (keyup.enter)="confirmEditor()" (keyup.escape)="cancelEditor()" />

      <div class="edit__actions">
        <button type="button" class="edit__btn edit__btn--cancel"
                (click)="cancelEditor()">Cancel · 取消</button>
        <button type="button" class="edit__btn edit__btn--confirm"
                (click)="confirmEditor()">Update · 更新</button>
      </div>
    </div>
  </div>
</div>
