NowChess-Frontend/src/app/pages/bots/bots.component.html

<div class="b-shell">
  <div class="page">

    <nav class="crumb">
      <a routerLink="/" class="crumb-link">
        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor"
          stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">
          <polyline points="15 18 9 12 15 6"/>
        </svg>
        Back to lobby
      </a>
      <span class="crumb-sep">/</span>
      <span class="crumb-current">My Bots</span>
    </nav>

    <header class="page-header">
      <div class="title-row">
        <h1 class="page-title">My Bots</h1>
        <button type="button" class="btn-new" (click)="openCreate()">
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor"
            stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">
            <line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>
          </svg>
          New bot
        </button>
      </div>
      <p class="page-sub">Bots are automated players owned by your account. Each has a token used to join tournaments and make moves.</p>
    </header>

    @if (showCreate) {
      <div class="create-panel">
        <div class="create-inner">
          <label class="field-label">Bot name</label>
          <div class="create-row">
            <input type="text" class="text-input" [(ngModel)]="newBotName"
              placeholder="e.g. AlphaBot" (keydown.enter)="submitCreate()"
              [disabled]="creating" maxlength="40" />
            <button type="button" class="btn-primary" (click)="submitCreate()"
              [disabled]="creating || !newBotName.trim()">
              {{ creating ? 'Creating…' : 'Create' }}
            </button>
            <button type="button" class="btn-ghost" (click)="cancelCreate()" [disabled]="creating">
              Cancel
            </button>
          </div>
          @if (createError) {
            <p class="error-text">{{ createError }}</p>
          }
        </div>
      </div>
    }

    @if (loading) {
      <div class="state-msg"><span class="pulse"></span>Loading bots…</div>
    } @else if (bots.length === 0) {
      <div class="empty-state">
        <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor"
          stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" class="empty-icon">
          <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
          <path d="M7 11V7a5 5 0 0 1 10 0v4"/>
        </svg>
        <p class="empty-title">No bots yet</p>
        <p class="empty-sub">Create a bot to join tournaments and play automated games.</p>
      </div>
    } @else {
      <div class="bot-list">
        @for (bot of bots; track bot.id) {
          <div class="bot-card">
            <div class="bot-main">
              <div class="bot-avatar">{{ bot.name.charAt(0).toUpperCase() }}</div>
              <div class="bot-info">
                <span class="bot-name">{{ bot.name }}</span>
                <span class="bot-meta">Rating {{ bot.rating }} · Created {{ bot.createdAt | date:'MMM d, yyyy' }}</span>
              </div>
              <div class="bot-actions">
                <button type="button" class="btn-token"
                  [class.active]="!!revealedTokens[bot.id]"
                  [disabled]="revealingId === bot.id"
                  (click)="revealToken(bot.id)">
                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                    stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    @if (revealedTokens[bot.id]) {
                      <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94"/>
                      <path d="M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19"/>
                      <line x1="1" y1="1" x2="23" y2="23"/>
                    } @else {
                      <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
                      <circle cx="12" cy="12" r="3"/>
                    }
                  </svg>
                  {{ revealingId === bot.id ? '…' : (revealedTokens[bot.id] ? 'Hide' : 'Token') }}
                </button>
                <button type="button" class="btn-danger"
                  [disabled]="deletingId === bot.id"
                  (click)="deleteBot(bot.id)">
                  {{ deletingId === bot.id ? '…' : 'Delete' }}
                </button>
              </div>
            </div>

            @if (revealedTokens[bot.id]) {
              <div class="token-panel">
                <div class="token-warning">
                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                    stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/>
                    <line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/>
                  </svg>
                  Token was just regenerated — the old one is now invalid. Keep this secret.
                </div>
                <div class="token-row">
                  <code class="token-value">{{ revealedTokens[bot.id] }}</code>
                  <button type="button" class="btn-copy" (click)="copyToken(bot.id)">
                    {{ copiedId === bot.id ? '✓ Copied' : 'Copy' }}
                  </button>
                </div>
              </div>
            }
          </div>
        }
      </div>
    }

  </div>
</div>