src/app/app.html

<main class="studio-shell">
  <nav class="top-bar" aria-label="Studio status">
    <strong>MplusKassa Studio</strong>
    <span>Menu deal staat klaar</span>
  </nav>

  <section class="workflow-board" aria-label="Beeldworkflow">
    <header class="board-header">
      <div>
        <p class="eyebrow">Stap 1 / beeldbron</p>
        <h1>Maak een menu-afbeelding.</h1>
        <p class="intro">Start met het voorbeeldmenu of kies eigen foto’s. Daarna maakt Studio één vierkante compositie.</p>
      </div>
      <p class="next-action">{{ nextAction() }}</p>
    </header>

    <div class="workflow-grid">
      <aside class="step-rail" aria-label="Stappen">
        <ol class="monitor-steps">
          @for (step of monitorSteps(); track step.label) {
            <li [class]="step.state">
              <strong>{{ step.label }}</strong>
              <span>{{ step.detail }}</span>
            </li>
          }
        </ol>
      </aside>

      <section class="action-panel" aria-label="Volgende actie">
        <div class="task-heading">
          <p class="eyebrow">Snel starten</p>
          <h2>Gebruik het voorbeeldmenu</h2>
          <p>Laadt direct burger, drank en friet. Geen instellingen nodig om de eerste generatie te testen.</p>
        </div>

        <button
          class="example-menu"
          type="button"
          (click)="onUseExampleMenu()"
        >Gebruik voorbeeldmenu</button>

        <div class="example-strip" aria-label="Voorbeeldbeelden">
          @for (exampleImage of exampleImages; track exampleImage.name) {
            <figure>
              <img
                [src]="exampleImage.url"
                [alt]="exampleImage.label"
              />
              <figcaption>{{ exampleImage.label }}</figcaption>
            </figure>
          }
        </div>

        <div class="upload-card">
          <label>
            <input
              type="file"
              accept="image/*"
              multiple
              (change)="onFilesSelected($event)"
            />
            <span>Foto’s kiezen</span>
            <small>{{ selectedImageCountLabel() }}</small>
          </label>

          <label>
            <input
              type="file"
              accept="image/*"
              multiple
              webkitdirectory
              (change)="onFilesSelected($event)"
            />
            <span>Map kiezen</span>
            <small>Meerdere foto’s tegelijk</small>
          </label>
        </div>

        <div class="controls" aria-label="Transformatie instellingen">
          <label>
            Stijl
            <select
              [ngModel]="preset()"
              (ngModelChange)="preset.set($event)"
            >
              <option value="studio">Witte menu achtergrond</option>
              <option value="food">Warme horeca sfeer</option>
              <option value="retail">Winkelpresentatie</option>
              <option value="premium">Luxe campagnebeeld</option>
            </select>
          </label>

          <label>
            Formaat
            <select
              [ngModel]="ratio()"
              (ngModelChange)="ratio.set($event)"
            >
              <option value="16:9">Breed scherm</option>
              <option value="9:16">Staand scherm</option>
              <option value="1:1">Vierkant beeld</option>
            </select>
          </label>

          <label class="prompt-field">
            Instructie
            <textarea
              [ngModel]="prompt()"
              (ngModelChange)="prompt.set($event)"
              rows="2"
            ></textarea>
          </label>

          <button
            class="primary"
            type="button"
            [disabled]="!hasImages() || isGenerating()"
            (click)="onGenerateBatch()"
          >
            {{ isGenerating() ? 'Beelden maken...' : 'Maak nieuwe beelden' }}
          </button>
        </div>
      </section>

      <aside class="proof-panel" aria-label="Status en bewijs">
        <p class="eyebrow">Status</p>
        <h2>{{ monitor().message }}</h2>
        <div class="progress-block">
          <div class="progress-meta">
            <strong>{{ progressLabel() }}</strong>
            <span>{{ estimateLabel() }}</span>
          </div>
          <div class="progress-track" aria-label="Voortgang">
            <span [style.width.%]="monitor().progress"></span>
          </div>
        </div>
        <dl>
          <div>
            <dt>Beelden</dt>
            <dd>{{ selectedImageCountLabel() }}</dd>
          </div>
          <div>
            <dt>Referentie</dt>
            <dd>{{ monitor().jobId }}</dd>
          </div>
          <div>
            <dt>Systeem</dt>
            <dd>{{ monitor().provider }}</dd>
          </div>
        </dl>

        <ol class="activity-list">
          @for (event of monitor().events.slice(-4); track event) {
            <li>{{ event }}</li>
          }
        </ol>
      </aside>
    </div>
  </section>

  @if (generationError(); as error) {
    <p class="status-message">{{ error }}</p>
  }

  @if (hasGeneratedResult()) {
    <section class="image-grid" aria-label="Resultaat">
    @for (image of resultImages(); track image.id) {
      <article class="image-card">
        <header>
          <div>
            <h2>{{ image.name }}</h2>
            <p>{{ image.size }} · {{ ratio() }}</p>
          </div>
          <button class="ghost" type="button" (click)="onUseExampleMenu()">Opnieuw starten</button>
        </header>

        <div class="preview-pair">
          <figure>
            <img
              [src]="image.url"
              [alt]="image.name + ' origineel'"
            />
            <figcaption>Origineel</figcaption>
          </figure>
          <figure class="generated">
            <img
              [src]="image.previewUrl"
              [style.filter]="image.previewFilter"
              [alt]="image.name + ' variant'"
            />
            <figcaption>{{ image.selectedVariantData.label }}</figcaption>
          </figure>
        </div>

        <p class="note">{{ image.note }}</p>
      </article>
    }
  </section>
  }
</main>