# T15 — Session Card Template
## Generates: `components/session-card/session-card.component.html` + `.scss`

---

## Step 1 — Reference Files (fill in before running)

```
"Read CLAUDE.md.
Read @[REF:CARD] — learn how we build entity cards/tiles in this project:
  card wrapper, content layout, action footer, hover states.
Read @[REF:LIST_PAGE] — see how cards appear inside a grid or list.
Then implement the template described below."
```

**What to look for in your references:**
- Card wrapper component (`<gb-card>` etc.) or CSS class pattern
- How entity title and metadata appear inside a card
- Status badge/pill component
- Avatar overlap pattern if used anywhere for user lists
- Action button placement inside a card
- How "active" or "highlighted" card states are shown

---

## Step 2 — What This Component Is

A **reusable entity card** for displaying a session summary.
Used in the dashboard grid and anywhere sessions are listed.
It is a presentational component — all data via `@Input`, all
actions via `@Output`.

Inputs defined in TS:
```typescript
@Input({ required: true }) session: CollabSession | CollabSessionSummary
@Input() isCurrentSession = false
@Input() displayMode: 'grid' | 'compact' = 'grid'
```

---

## Step 3 — Content Specification

### Card Wrapper
```
Use your project's card component or card CSS pattern.
Apply an "active" variant when: isCurrentSession === true
  (highlighted border or background — use your project's
  selected/active card state if it has one)

Hover: subtle lift effect — match your project's card hover pattern.
```

### Card Header Row
```
Left: Mode icon
  A colored circle or badge showing the session mode:
    CoBrowse:    use your project's "globe" or "browse" icon
    ScreenShare: use your project's "monitor" or "screen" icon
    Hybrid:      use your project's "layers" icon
  Color: matches mode (teal/blue/purple — use your design tokens)

Right: Status badge/pill
  session.status
  Use your project's badge component with appropriate variant:
    Active    → success/green variant
    Pending   → info/blue variant
    Paused    → warning/amber variant
    Ended     → muted/neutral variant
    Abandoned → muted/neutral variant
```

### Session Title
```
session.title
Truncate at 2 lines (CSS line-clamp or your project's truncate utility)
Use your project's card title typography
```

### Meta Row
```
Inline metadata — muted secondary style, your project's meta pattern:
  session.sessionCode     monospace
  ·
  mode label              (CoBrowse → "Co-Browse" etc.)
  ·
  elapsed or scheduled:
    if startedAt:   show elapsed time since startedAt
    if scheduledAt: show "Scheduled " + formatted date
    else:           show createdDate
```

### Context Chip
```
Show only when: session.contextModuleCode is not null

Use your project's chip/tag/badge component:
  "[session.contextModuleCode] · [session.contextRecordLabel]"
  e.g. "AP · Invoice #4521"
  If contextRecordLabel is null: show module code only
```

### Participants Row
```
Show up to 4 participant avatars overlapping (stacked right-to-left)
Then "+N" overflow indicator if more than 4

Avatar:
  Initials of participant.displayName (first letter only)
  Background: participant.cursorColor at ~20% opacity
  Text: participant.cursorColor
  Size: ~24px circle
  Overlap: margin-left: -6px on all after first, border: 2px card-bg

When session is a CollabSessionSummaryDTO (no participants array):
  Show only the activeParticipantCount as "N participants" text
  (SummaryDTO does not have a participants array — guard with 'participants' in session)

visibleParticipants() computed:
  { shown: participants.slice(0, 4), overflow: max(0, total - 4) }
  This computed is already in TS — bind to it.
```

### Card Footer — Action Buttons
```
Actions depend on session.status:

Status === 'Active':
  "Join"   → emit join.emit(session.sessionId)   [primary button]
  "Invite" → emit invite.emit(session.sessionId) [secondary/ghost]

Status === 'Pending' AND session has scheduledAt:
  if isDueSoon() (within 15 min):
    "Start Now" → emit start.emit(session.sessionId)  [primary, highlighted]
    Show a "Due soon" indicator (amber pill or label)
  else:
    Show scheduledAt countdown text only — no action button

Status === 'Ended' or 'Abandoned':
  "View Details" → emit view.emit(session.sessionId)  [ghost/link]

Use your project's compact card action button pattern.
```

---

## Step 4 — Angular Bindings Summary

```typescript
// Inputs
session              CollabSession | CollabSessionSummaryDTO
isCurrentSession     boolean
displayMode          'grid' | 'compact'

// Computed (already in TS)
modeIcon()
modeLabel()
isDueSoon()
visibleParticipants()   { shown: Participant[], overflow: number }

// Outputs (EventEmitter)
join.emit(sessionId)
invite.emit(sessionId)
view.emit(sessionId)
start.emit(sessionId)
```

---

## SCSS Instruction

```
Write SCSS only for:
- Participant avatar overlap (margin-left: -6px, border sizing)
  — this is specific to this card and unlikely in design system
- Avatar dynamic background/text color bindings use [style] in template,
  not CSS classes
- isDueSoon pulse indicator if a subtle animation is desired

Do NOT write styles for:
- Card wrapper (use your design system card)
- Button variants (use your design system buttons)
- Badge/chip styles (use your design system)
- Typography (use your design system)
```

---
---

# T16 — Config Page Template
## Generates: `pages/config/collab-config.component.html`

---

## Step 1 — Reference Files (fill in before running)

```
"Read CLAUDE.md.
Read @[REF:DETAIL_PAGE] — learn how we structure a settings/configuration
form page: sections, layout, save/cancel actions.
Read @[REF:FORM_FIELD] — learn our field, toggle/switch, and
select component patterns.
Then implement the template described below."
```

**What to look for in your references:**
- Settings page layout (single column or two-column)
- How form sections/groups are visually separated
- Toggle/switch component for boolean settings
- How radio options or option cards appear in settings
- Form action bar (save button position, unsaved changes indicator)
- Warning/cross-validation message pattern
- How admin-only pages are visually indicated

---

## Step 2 — What This Page Is

An **admin configuration page** for CollabSpace org settings.
Route: `/collaboration/config`
Only accessible to users with admin role.

---

## Step 3 — Content Specification

### Page Header
```
Title: "Collaboration Configuration"
Subtitle: "Configure how CollabSpace works for your organisation"

Right side of header:
  "Last saved: " + lastSaved() formatted  (hidden when lastSaved() is null)
  muted/secondary text

Save button:
  label: "Save Changes"
  disabled when: form.pristine OR isSaving() === true
  loading when: isSaving() === true
  click: save()
  Use your project's primary button

Use your project's settings/admin page header pattern.
```

### Unsaved Changes Banner
```
Show when: form.dirty AND isSaving() === false
Use your project's info/warning banner component
Text: "You have unsaved changes."
Inline action: "Reset to Defaults" → resetToDefaults()
```

### Loading State
```
When isLoading() === true:
  Show loading skeleton for the entire form body
  Use your project's skeleton component
```

### Section 1 — Participant Limits (card/panel)
```
Use your project's card or settings-group component.
Heading: "Participant Limits"

Fields (use your project's number input component):

  Default Max Participants
    formControlName: "limits.maxParticipantsDefault"
    label: "Default max per session"
    min: 2, max: 100
    helper text: "Applied when creating a new session"

  Absolute Maximum
    formControlName: "limits.maxParticipantsAbsolute"
    label: "Absolute maximum"
    min: 2, max: 100
    helper text: "Hard ceiling — cannot be exceeded"

  Cross-validation warning (NOT a blocking error):
    Show when: maxParticipantsDefault > maxParticipantsAbsolute
    Use your project's inline warning (amber, not red)
    Text: "Default exceeds absolute maximum"

  Session Timeout (minutes)
    formControlName: "limits.sessionTimeoutMinutes"
    label: "Session timeout"
    min: 5, max: 480
    helper text: "Sessions with no activity are ended automatically"

  Invite Link Expiry (minutes)
    formControlName: "limits.inviteLinkExpiryMinutes"
    label: "Invite link expiry"
    min: 10, max: 1440
    helper text: "How long a shareable invite link remains valid"

  Max Scheduled Sessions Per User
    formControlName: "limits.maxScheduledSessionsPerUser"
    label: "Max scheduled sessions per user"
    min: 1, max: 100
```

### Section 2 — Features (card/panel)
```
Heading: "Features"
Use your project's settings-group layout.

Each feature is a toggle row using your project's toggle/switch component:
  Layout: label + description on left, toggle on right

Toggles in THREE groups:

  Core Features:
    Allow Screen Share
      formControlName: "features.allowScreenShare"
      description: "Participants can share their screen"

    Enable Co-Browse
      formControlName: "features.enableCoBrowse"
      description: "Sync navigation and form state across participants"

    Enable In-Session Chat
      formControlName: "features.enableInSessionChat"
      description: "Real-time messaging during sessions"

  Collaboration Tools:
    Enable Annotations
      formControlName: "features.enableAnnotations"
      description: "Draw and highlight on screen during sessions"

    Enable Cursor Broadcast
      formControlName: "features.enableCursorBroadcast"
      description: "Show participant cursors to everyone in the session"

    Enable Form Sync
      formControlName: "features.enableFormSync"
      description: "Synchronise form field changes to participants"

  Security:
    Allow Anonymous Join
      formControlName: "features.allowAnonymousJoin"
      description: "Users without an account can join via link"

    Allow Guest Join Via Link
      formControlName: "features.allowGuestJoinViaLink"
      description: "Anyone with an invite link can join"

    Enable Audit Log
      formControlName: "features.enableAuditLog"
      description: "Record all session events for compliance"
```

### Section 3 — Control Consent Mode (card/panel)
```
Heading: "Control Transfer"
Description: "How participants request and receive editing control"

Three option cards (or radio cards — use your project's pattern):
  Use the same option-card pattern as T10 form (session mode selector)

  Option 1: "Not Required"
    formControlName: "controlConsentMode"  value: "NotRequired"
    description: "Control can be granted without the recipient's
                  explicit acceptance"

  Option 2: "Always Required"
    formControlName: "controlConsentMode"  value: "Required"
    description: "Recipient must accept before control is transferred"

  Option 3: "Role Dependent"  ← default
    formControlName: "controlConsentMode"  value: "RoleDependent"
    description: "Host and Presenters receive control without confirmation;
                  CoEditors and Viewers must accept"
```

### Section 4 — Module Restrictions (card/panel)
```
Heading: "Module Access"
Description: "Restrict CollabSpace to specific modules"

Two options:

  Option A: All modules (radio or toggle)
    selected when: form.get('allowedModules')?.value === null
    click: form.get('allowedModules')?.setValue(null)
    label: "Available in all modules"

  Option B: Specific modules
    selected when: allowedModules is not null
    click: form.get('allowedModules')?.setValue([])
    label: "Restrict to selected modules"

  When Option B selected — show multi-select or chip input:
    Use your project's multi-select or tag-input component
    formControlName: "allowedModules"
    Options: list of all module codes (AP, AR, HRMS, CRM, etc.)
    Placeholder: "Select modules..."
```

---

## Step 4 — Angular Bindings Summary

```typescript
form              FormGroup (nested: limits, features groups)
isLoading()       Signal<boolean>
isSaving()        Signal<boolean>
lastSaved()       Signal<Date | null>

save()
resetToDefaults()
```

---

## Constraints
- Use `[formGroup]="form"` at root, `formGroupName="limits"` and
  `formGroupName="features"` for nested groups
- Cross-validation warning is a WARNING not a form error —
  do not block save when it shows, just inform the user
- `@if (!isLoading())` wraps the entire form body
- `isLoading() === true` shows skeleton, NOT the form
- "Reset to Defaults" must show a confirmation using your project's
  confirm dialog before resetting (add confirmReset() method in TS
  if not already present)