# T10 — Create Session Form Template
## Generates: `pages/session-create/session-create.component.html`

---

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

```
"Read CLAUDE.md.
Read @[REF:DETAIL_PAGE] — learn how we structure a create/edit form page:
  layout, section grouping, field placement, label alignment.
Read @[REF:FORM_FIELD] — learn our form field components:
  input wrapper, label, validation error display, required indicator,
  helper text, and how reactive form controls are bound.
Then implement the template described below."
```

**What to look for in your references:**
- Form wrapper component or CSS class
- How individual form fields are structured:
  `<gb-form-field>` or equivalent wrapper
- How validation errors are shown (inline, below field, summary at top)
- Required field indicator pattern
- How radio buttons or option selectors are styled in forms
- Date/time picker component
- Number input component or pattern
- Collapsible/accordion section if it exists
- Form action buttons — save/cancel placement and styling
- How section headings appear inside a form

---

## Step 2 — What This Page Is

A **form page** for creating a new collaboration session.
Route: `/collaboration/new`
Can also be opened as a dialog (the TS handles both modes).

---

## Step 3 — Content Specification

The form has these sections. Structure them using your project's
form section/grouping pattern:

### Section 1 — Session Type
```
Label: "Session Type"
Two options (use your project's option-card, radio-card, or
segmented-control pattern — NOT raw radio buttons unless that
is all your project uses):

  Option A: "Ad-hoc"
    description: "Start immediately"
    icon: your project's "lightning" or "instant" icon
    formControlName: "sessionType"  value: "AdHoc"

  Option B: "Scheduled"
    description: "Plan for later"
    icon: your project's "calendar" or "clock" icon
    formControlName: "sessionType"  value: "Scheduled"

When "Scheduled" is selected → show scheduled fields (below)
Use @if (form.get('sessionType')?.value === 'Scheduled')
```

### Scheduled Fields (conditional — shown when Scheduled selected)
```
Field: Scheduled Date & Time
  formControlName: "scheduledAt"
  Use your project's date-time picker component
  Required when sessionType === Scheduled
  Show validation error when: scheduledAt is in the past

Field: Duration (minutes)
  formControlName: "scheduledDurationMinutes"
  Use your project's number input
  Placeholder: "e.g. 60"
  Helper text: "Optional — for scheduling purposes only"
```

### Section 2 — Session Mode
```
Label: "Mode"
Three options (same component pattern as Section 1):

  Option A: "Co-Browse"
    description: "Sync navigation and forms across participants"
    icon: your project's "globe" or "link" icon
    formControlName: "mode"  value: "CoBrowse"

  Option B: "Screen Share"
    description: "Share your screen with participants"
    icon: your project's "monitor" or "screen" icon
    formControlName: "mode"  value: "ScreenShare"

  Option C: "Hybrid"
    description: "Co-browse with screen sharing"
    icon: your project's "layers" or "combine" icon
    formControlName: "mode"  value: "Hybrid"
```

### Section 3 — Session Title
```
Field: Title
  formControlName: "title"
  label: "Session Title"
  required: true
  maxlength: 200
  placeholder: "e.g. Review Invoice #4521"
  Show character count if your project does that
  Show validation error: required, maxLength
```

### Section 4 — Module Context (optional)
```
Helper text: "Link this session to a specific record (optional)"

Field: Module
  formControlName: "contextModuleCode"
  Use your project's select/dropdown component
  Options: list of module codes — provide as static array in TS
    e.g. AP, AR, HRMS, CRM, INV, PROC (and all others)
  Placeholder: "Select module..."

Field: Record Reference
  formControlName: "contextRecordLabel"
  Use your project's text input
  label: "Record Label"
  placeholder: "e.g. Invoice #4521"
  helper text: "Human-readable label shown to participants"
  show only when contextModuleCode has a value:
    @if (form.get('contextModuleCode')?.value)
```

### Section 5 — Advanced (collapsible)
```
Use your project's collapsible/accordion/expandable section component.
Label: "Advanced Options"
Default: collapsed

Field: Max Participants
  formControlName: "maxParticipants"
  Use your project's number input
  label: "Max Participants"
  min: 2, max: 100
  placeholder: "Default: 10"
  helper text: "Leave blank to use organisation default"
  Show validation error: min, max
```

### Form Actions
```
Follow your project's form footer / action bar pattern exactly.
Two actions:

  Cancel button:
    label: "Cancel"
    click: router.navigate(['/collaboration'])
    use your project's secondary/ghost button variant

  Submit button:
    label: "Create Session" (when sessionType === AdHoc)
    label: "Schedule Session" (when sessionType === Scheduled)
    Use @switch or @if to toggle label
    click: submit()
    disabled when: isSubmitting() === true
    loading state when: isSubmitting() === true
    Use your project's primary button with loading prop
```

### Form Error Summary
```
Show when: form submitted with validation errors
Use your project's form-level error summary component if one exists.
Otherwise show a banner: "Please fix the errors below before continuing."
```

---

## Step 4 — Angular Bindings Summary

```typescript
// The reactive form group — bind with [formGroup]="form"
form                          FormGroup

// Signals
isSubmitting()                Signal<boolean>

// Read form values in template (for conditional display)
form.get('sessionType')?.value    — 'AdHoc' | 'Scheduled'
form.get('mode')?.value           — 'CoBrowse' | 'ScreenShare' | 'Hybrid'
form.get('contextModuleCode')?.value — string | null

// Actions
submit()
```

---

## Constraints
- Use `[formGroup]="form"` on the form element
- Use `formControlName="fieldName"` on each field
- Never call `form.value` to read values for display — use
  `form.get('field')?.value` or expose a signal/computed in TS
- Use Angular 20 control flow: `@if`, `@switch`
- Follow your project's pattern for reactive form binding EXACTLY —
  do not invent a new approach
- Do NOT use `<form>` HTML element — use a `<div>` with `[formGroup]`
  (this matches the existing project standard per CLAUDE.md)