{{define "content"}}
<div class="spread">
  <h1>Atomization Board</h1>
  <span id="atomizer-health" class="badge" aria-live="polite">checking atomizer…</span>
</div>
<div class="error-box" id="error" role="alert"></div>

<div class="spread mt">
  <label for="board-customer" class="muted" style="display:inline">Customer:&nbsp;
    <select id="board-customer" style="width:auto"></select>
  </label>
  <span>
    <button class="btn small" id="select-all">Select all atomized</button>
    <button class="btn primary small" id="bulk-publish" disabled>Publish selected (0)</button>
  </span>
</div>

<div id="board" class="stack mt"></div>

<dialog id="subdivide-dialog">
  <form method="dialog" id="subdivide-form" class="stack" style="min-width:420px">
    <h2>Subdivide task</h2>
    <p class="muted" id="subdivide-task-title"></p>
    <div class="field">
      <label for="sd-note">Note for the atomizer (optional)</label>
      <textarea id="sd-note" placeholder="e.g. split backend/frontend, keep DB migration separate"></textarea>
    </div>
    <div class="row">
      <div class="field">
        <label for="sd-min">Min subtasks</label>
        <input type="number" id="sd-min" min="0" max="20" value="2">
      </div>
      <div class="field">
        <label for="sd-max">Max subtasks</label>
        <input type="number" id="sd-max" min="0" max="20" value="8">
      </div>
    </div>
    <p class="hint" id="sd-replace-warning" hidden>⚠ This task already has subtasks. Re-running replaces the unpublished ones.</p>
    <div class="spread">
      <button class="btn" type="button" id="sd-cancel">Cancel</button>
      <button class="btn primary" type="submit">Subdivide</button>
    </div>
  </form>
</dialog>

<dialog id="extend-dialog">
  <form method="dialog" id="extend-form" class="stack" style="min-width:420px">
    <h2>Extend task</h2>
    <p class="muted" id="extend-task-title"></p>
    <div class="field">
      <label for="ex-note">Extension note (required)</label>
      <textarea id="ex-note" required placeholder="describe the additional scope"></textarea>
    </div>
    <div class="spread">
      <button class="btn" type="button" id="ex-cancel">Cancel</button>
      <button class="btn primary" type="submit">Create extension</button>
    </div>
  </form>
</dialog>

<dialog id="edit-dialog">
  <form method="dialog" id="edit-form" class="stack" style="min-width:480px">
    <h2>Edit task</h2>
    <div class="field">
      <label for="ed-title">Title</label>
      <input type="text" id="ed-title" required>
    </div>
    <div class="field">
      <label for="ed-desc">Description</label>
      <textarea id="ed-desc" rows="6"></textarea>
    </div>
    <div class="field">
      <label for="ed-ac">Acceptance criteria (one per line)</label>
      <textarea id="ed-ac" rows="4"></textarea>
    </div>
    <div class="row">
      <div class="field">
        <label for="ed-budget">Budget</label>
        <input type="number" id="ed-budget" min="0" step="0.01">
      </div>
      <div class="field" id="ed-cascade-wrap">
        <label><input type="checkbox" id="ed-cascade" checked> Apply budget to subtasks</label>
      </div>
    </div>
    <div class="spread">
      <button class="btn" type="button" id="ed-cancel">Cancel</button>
      <button class="btn primary" type="submit">Save</button>
    </div>
  </form>
</dialog>
{{end}}