LoreMind/web/src/app/lore/page-create/page-create.component.html

<div class="page">

  <header class="page-header">
    <h1>{{ 'pageCreate.title' | translate }}</h1>
    <p class="subtitle">{{ 'pageCreate.subtitle' | translate }}</p>
  </header>

  <form [formGroup]="form" (ngSubmit)="submit()" class="page-form">

    <!-- Titre -->
    <div class="field">
      <label for="page-title">{{ 'pageCreate.pageTitleLabel' | translate }}</label>
      <input id="page-title" type="text" formControlName="title" [placeholder]="'pageCreate.pageTitlePlaceholder' | translate" />
    </div>

    <!-- Template -->
    <div class="field">
      <label>{{ 'pageCreate.templateLabel' | translate }}</label>

      @if (templates.length) {
        <div class="templates-grid">
          @for (t of templates; track t) {
            <button
              type="button"
              class="template-card"
              [class.selected]="selectedTemplateId === t.id"
              (click)="selectTemplate(t)">
              <div class="template-card-head">
                <lucide-icon [img]="FileText" [size]="16"></lucide-icon>
                <span class="template-name">{{ t.name }}</span>
              </div>
              <p class="template-description">{{ t.description || '—' }}</p>
            </button>
          }
          <!-- Carte "+" : sauvegarde le brouillon et part creer un nouveau template ;
          template-create renverra ici via le mecanisme returnTo. -->
          <a
            class="template-card template-card-create"
            [routerLink]="['/lore', loreId, 'templates', 'create']"
            [queryParams]="{ returnTo: 'page-create' }"
            (click)="saveDraft()"
            [title]="'pageCreate.createTemplateTitle' | translate">
            <div class="template-card-head">
              <lucide-icon [img]="Plus" [size]="16"></lucide-icon>
              <span class="template-name">{{ 'pageCreate.createTemplate' | translate }}</span>
            </div>
            <p class="template-description">
              {{ 'pageCreate.createTemplateHint' | translate }}
            </p>
          </a>
        </div>
      } @else {
        <p class="empty-hint">
          {{ 'pageCreate.noTemplates' | translate }}
          <a [routerLink]="['/lore', loreId, 'templates', 'create']" [queryParams]="{ returnTo: 'page-create' }" (click)="saveDraft()">{{ 'pageCreate.createTemplate' | translate }}</a> {{ 'pageCreate.firstSuffix' | translate }}
        </p>
      }

    </div>

    <!-- Dossier de destination -->
    <div class="field">
      <label for="page-node">{{ 'pageCreate.nodeLabel' | translate }}</label>

      @if (nodes.length) {
        <select id="page-node" formControlName="nodeId">
          <option value="" disabled>{{ 'pageCreate.nodePlaceholder' | translate }}</option>
          @for (node of nodes; track node) {
            <option [value]="node.id">{{ node.name }}</option>
          }
        </select>
        <p class="hint">{{ 'pageCreate.nodeHint' | translate }}</p>
      } @else {
        <p class="empty-hint">
          {{ 'pageCreate.noNodes' | translate }}
          <a [routerLink]="['/lore', loreId, 'nodes', 'create']" [queryParams]="{ returnTo: 'page-create' }" (click)="saveDraft()">{{ 'pageCreate.createNode' | translate }}</a> {{ 'pageCreate.firstSuffix' | translate }}
        </p>
      }

    </div>

    <!-- Aide contextuelle -->
    <div class="info-box" [innerHTML]="'pageCreate.infoBox' | translate"></div>

    <!-- Erreur wizard (parsing &lt;values&gt; ou échec HTTP) -->
    @if (wizardError) {
      <div class="wizard-error" role="alert">{{ wizardError }}</div>
    }

    <!-- Actions -->
    <div class="actions-row">
      <button type="button" class="btn-secondary" (click)="cancel()">{{ 'common.cancel' | translate }}</button>
      <button type="button" class="btn-ai" (click)="openWizard()" [disabled]="!canSubmit"
        [title]="'pageCreate.aiTitle' | translate">
        <lucide-icon [img]="Sparkles" [size]="14"></lucide-icon>
        {{ 'pageCreate.createWithAi' | translate }}
      </button>
      <button type="submit" class="btn-primary" [disabled]="!canSubmit">{{ 'pageCreate.createPage' | translate }}</button>
    </div>

  </form>

</div>

<!-- Drawer chat IA en mode wizard -->
<app-ai-chat-drawer
  [loreId]="loreId"
  [isOpen]="chatOpen"
  [persistent]="false"
  [welcomeMessage]="wizardWelcome"
  [systemPromptAddon]="wizardSystemPrompt"
  [quickSuggestions]="wizardSuggestions"
  [primaryAction]="wizardPrimaryAction"
  (closed)="closeWizard()"
  (assistantReply)="onWizardReply($event)"
  (primaryActionClick)="applyWizardAndCreate()">
</app-ai-chat-drawer>