* Design
[[file:template-section.png]]
** Coding rules
- Naming

*** List of used names
- container
 - textbox
  - key
  - x
  - y
  - size
  - encoding
  
* Template.html
this page will is the interface for editing the parameters of a template
some parameters aply for the whole template. but most of them are per textbox

- features (in order of most to least important)
  - jason export
  - livePreview
        this is easy to impliment later and not really citical
  - precise x,y in mm
** textBox menus
To be able to add multiple menus with incremental IDs i use this example code
#+begin_src html
<div id="container">
<div class="textBox">
  key: <input type="text" name="key"><br>
  x: <input type="number" name="x"><br>
  y: <input type="number" name="y"><br>
  size: <input type="number" name="size"><br>
  encoding:
  <select name="encoding">
    <option>text</option>
    <option>QR code</option>
    <option>Barcode</option>
  </select>
  <hr>
</div>
</div>
<button id="new">New</button>
<script>
let count = 1;

document.getElementById("new").onclick = function () {
  const container = document.getElementById("container");
  const first = container.querySelector(".textBox");
  const clone = first.cloneNode(true);

  // assign incrementing IDs based on count
  clone.querySelectorAll("input, select").forEach(el => {
    el.id = el.name + "-" + count;
  });

  count++;
  container.appendChild(clone);
};
</script>
#+end_src