SimpleCloudNotifier/webapp/src/app/features/channels/channel-detail/channel-detail.component.html

<div class="page-content">
  @if (loading()) {
    <div class="loading-container">
      <nz-spin nzSimple nzSize="large"></nz-spin>
    </div>
  } @else if (channel()) {
    <div class="detail-header">
      <button nz-button (click)="goBack()">
        <span nz-icon nzType="arrow-left" nzTheme="outline"></span>
        Back to Channels
      </button>
      @if (isOwner()) {
        <div class="header-actions">
          <button nz-button (click)="openEditModal()">
            <span nz-icon nzType="edit"></span>
            Edit
          </button>
          <button
            nz-button
            nzType="primary"
            nzDanger
            nz-popconfirm
            nzPopconfirmTitle="Are you sure you want to delete this channel? All messages and subscriptions will be lost."
            nzPopconfirmPlacement="bottomRight"
            (nzOnConfirm)="deleteChannel()"
            [nzLoading]="deleting()"
          >
            <span nz-icon nzType="delete"></span>
            Delete
          </button>
        </div>
      }
    </div>

    <nz-card [nzTitle]="channel()!.display_name">
      <nz-descriptions nzBordered [nzColumn]="2">
        <nz-descriptions-item nzTitle="Channel ID" [nzSpan]="2">
          <span class="mono">{{ channel()!.channel_id }}</span>
        </nz-descriptions-item>
        <nz-descriptions-item nzTitle="Internal Name">
          <span class="mono">{{ channel()!.internal_name }}</span>
        </nz-descriptions-item>
        <nz-descriptions-item nzTitle="Status">
          <nz-tag [nzColor]="getSubscriptionStatus().color">
            {{ getSubscriptionStatus().label }}
          </nz-tag>
        </nz-descriptions-item>
        <nz-descriptions-item nzTitle="Owner" [nzSpan]="2">
          <span class="mono">{{ channel()!.owner_user_id }}</span>
        </nz-descriptions-item>
        @if (channel()!.description_name) {
          <nz-descriptions-item nzTitle="Description" [nzSpan]="2">
            {{ channel()!.description_name }}
          </nz-descriptions-item>
        }
        <nz-descriptions-item nzTitle="Messages Sent">
          {{ channel()!.messages_sent }}
        </nz-descriptions-item>
        <nz-descriptions-item nzTitle="Last Sent">
          @if (channel()!.timestamp_lastsent) {
            {{ channel()!.timestamp_lastsent | relativeTime }}
          } @else {
            Never
          }
        </nz-descriptions-item>
        <nz-descriptions-item nzTitle="Created" [nzSpan]="2">
          {{ channel()!.timestamp_created }}
        </nz-descriptions-item>
      </nz-descriptions>
    </nz-card>

    @if (isOwner()) {
      <nz-card nzTitle="Keys" class="mt-16">
        @if (channel()!.subscribe_key) {
          <div class="key-section">
            <label>Subscribe Key</label>
            <nz-input-group [nzSuffix]="subscribeKeySuffix">
              <input
                type="text"
                nz-input
                [value]="channel()!.subscribe_key"
                readonly
                class="mono"
              />
            </nz-input-group>
            <ng-template #subscribeKeySuffix>
              <span
                nz-icon
                nzType="copy"
                class="action-icon"
                nz-tooltip
                nzTooltipTitle="Copy"
                [appCopyToClipboard]="channel()!.subscribe_key!"
              ></span>
            </ng-template>
            <div class="key-actions">
              <button
                nz-button
                nzSize="small"
                nz-popconfirm
                nzPopconfirmTitle="Regenerate subscribe key? The existing key will no longer be valid."
                (nzOnConfirm)="regenerateSubscribeKey()"
              >
                Invalidate & Regenerate
              </button>
            </div>
            <div class="qr-section">
              <app-qr-code-display [data]="qrCodeData()"></app-qr-code-display>
              <p class="qr-hint">Scan this QR code with the SimpleCloudNotifier app to subscribe to this channel.</p>
            </div>
          </div>
        }

        @if (channel()!.send_key) {
          <nz-divider></nz-divider>
          <div class="key-section">
            <label>Send Key</label>
            <nz-input-group [nzSuffix]="sendKeySuffix">
              <input
                type="text"
                nz-input
                [value]="channel()!.send_key"
                readonly
                class="mono"
              />
            </nz-input-group>
            <ng-template #sendKeySuffix>
              <span
                nz-icon
                nzType="copy"
                class="action-icon"
                nz-tooltip
                nzTooltipTitle="Copy"
                [appCopyToClipboard]="channel()!.send_key!"
              ></span>
            </ng-template>
            <div class="key-actions">
              <button
                nz-button
                nzSize="small"
                nz-popconfirm
                nzPopconfirmTitle="Regenerate send key?"
                (nzOnConfirm)="regenerateSendKey()"
              >
                Regenerate
              </button>
            </div>
          </div>
        }
      </nz-card>

      <nz-card nzTitle="Subscriptions" class="mt-16">
        <nz-table
          #subscriptionTable
          [nzData]="subscriptions()"
          [nzLoading]="loadingSubscriptions()"
          [nzShowPagination]="false"
          [nzNoResult]="noResultTpl"
          nzSize="small"
        >
        <ng-template #noResultTpl></ng-template>
          <thead>
            <tr>
              <th>Subscriber</th>
              <th>Status</th>
              <th>Created</th>
            </tr>
          </thead>
          <tbody>
            @for (sub of subscriptions(); track sub.subscription_id) {
              <tr>
                <td>
                  <span class="mono">{{ sub.subscriber_user_id }}</span>
                </td>
                <td>
                  <nz-tag [nzColor]="sub.confirmed ? 'green' : 'orange'">
                    {{ sub.confirmed ? 'Confirmed' : 'Pending' }}
                  </nz-tag>
                </td>
                <td>{{ sub.timestamp_created | relativeTime }}</td>
              </tr>
            } @empty {
              <tr>
                <td colspan="3">
                  <nz-empty nzNotFoundContent="No subscriptions"></nz-empty>
                </td>
              </tr>
            }
          </tbody>
        </nz-table>
      </nz-card>
    }
  } @else {
    <nz-card>
      <div class="not-found">
        <p>Channel not found</p>
        <button nz-button nzType="primary" (click)="goBack()">
          Back to Channels
        </button>
      </div>
    </nz-card>
  }
</div>

<!-- Edit Modal -->
<nz-modal
  [(nzVisible)]="showEditModal"
  nzTitle="Edit Channel"
  (nzOnCancel)="closeEditModal()"
  (nzOnOk)="saveChannel()"
  [nzOkLoading]="saving()"
>
  <ng-container *nzModalContent>
    <nz-form-item>
      <nz-form-label>Display Name</nz-form-label>
      <nz-form-control>
        <input
          type="text"
          nz-input
          [(ngModel)]="editDisplayName"
        />
      </nz-form-control>
    </nz-form-item>
    <nz-form-item class="mb-0">
      <nz-form-label>Description</nz-form-label>
      <nz-form-control>
        <textarea
          nz-input
          rows="3"
          [(ngModel)]="editDescription"
        ></textarea>
      </nz-form-control>
    </nz-form-item>
  </ng-container>
</nz-modal>