{% extends "base.html" %}
{% block content %}

<nav style="margin-bottom:1rem;font-size:.85rem">
  <a href="/">← Back to main</a>
</nav>

<div id="flash" class="flash{% if flash %} flash-{{ flash }} flash-visible{% endif %}" role="status" aria-live="polite">
  {{ flash_msg or '' }}
</div>

<details open><summary>EKG (synthetic ECG strip)</summary>
  <form method="post" action="/examples" data-print-type="ekg">
    <input type="hidden" name="_type" value="ekg">

    <label>Beats
      <input type="number" name="beats" min="1" max="20" value="4">
    </label>

    <label>Height (px)
      <input type="number" name="height_px" min="60" max="400" value="160">
    </label>

    <label>Line width
      <input type="number" name="line_width" min="1" max="4" value="2">
    </label>

    <label>Amplitude <span id="amplitude-val">0.82</span>
      <input type="range" name="amplitude" min="0.1" max="1" step="0.05" value="0.82"
             oninput="document.getElementById('amplitude-val').textContent=this.value">
    </label>

    <label>px per beat (portrait)
      <input type="number" name="px_per_beat" min="60" max="600" value="240">
    </label>

    <label><input type="checkbox" name="grid" checked> ECG grid</label>
    <label><input type="checkbox" name="portrait"> Portrait mode</label>

    <button type="submit">Print</button>
  </form>
</details>

<details><summary>Grid (multi-column table row)</summary>
  <form method="post" action="/examples" id="grid-form" data-print-type="grid">
    <input type="hidden" name="_type" value="grid">

    <div style="font-size:.8rem;color:var(--muted);margin-bottom:.4rem">Columns</div>

    <div style="display:grid;grid-template-columns:60px 1fr 90px 28px;gap:.3rem;font-size:.75rem;color:var(--muted);margin-bottom:.2rem">
      <span>Width</span><span>Text</span><span>Align</span><span></span>
    </div>

    <div id="grid-cols">
      <!-- JS will populate initial rows -->
    </div>

    <button type="button" id="add-col-btn" style="font-size:.85rem;margin-top:.4rem">+ Add column</button>

    <label style="margin-top:.75rem">Font size
      <input type="number" name="font_size" min="8" max="64" value="22">
    </label>

    <label><input type="checkbox" name="dither"> Floyd–Steinberg dithering</label>

    <button type="submit">Print</button>
  </form>
</details>

<script>
(function () {
  const container = document.getElementById('grid-cols');
  const addBtn = document.getElementById('add-col-btn');

  const INITIAL = [
    {width: 40, text: 'Item',  align: 'left'},
    {width: 30, text: 'Qty',   align: 'right'},
    {width: 30, text: 'Price', align: 'right'},
  ];

  function makeRow(col) {
    const row = document.createElement('div');
    row.style.cssText = 'display:grid;grid-template-columns:60px 1fr 90px 28px;gap:.3rem;align-items:center;margin-bottom:.25rem';

    const w = document.createElement('input');
    w.type = 'number'; w.name = 'col_width[]'; w.min = '1'; w.max = '200';
    w.value = col ? col.width : 30; w.style.width = '100%';

    const t = document.createElement('input');
    t.type = 'text'; t.name = 'col_text[]'; t.required = true;
    t.value = col ? col.text : ''; t.style.width = '100%';

    const a = document.createElement('select');
    a.name = 'col_align[]'; a.style.width = '100%';
    ['left', 'center', 'right'].forEach(v => {
      const o = document.createElement('option');
      o.value = v; o.textContent = v;
      if (col && col.align === v) o.selected = true;
      a.appendChild(o);
    });

    const rm = document.createElement('button');
    rm.type = 'button'; rm.textContent = '✕';
    rm.style.cssText = 'padding:0;width:24px;height:24px;line-height:1;flex-shrink:0';
    rm.onclick = () => {
      if (container.children.length > 1) row.remove();
    };

    row.appendChild(w); row.appendChild(t); row.appendChild(a); row.appendChild(rm);
    return row;
  }

  INITIAL.forEach(col => container.appendChild(makeRow(col)));
  addBtn.addEventListener('click', () => container.appendChild(makeRow(null)));
})();
</script>

{% endblock %}