{% from "partials/components/ui_macros.html" import btn %}
<div
  x-data='{
    "lines": {{ (values or {}).get(field.name, []) | tojson }},
    add() { this.lines.push("") },
    remove(i) { this.lines.splice(i, 1) }
  }'
  class="stack-sm"
>
  <template x-for="(line, i) in lines" :key="i">
    <div class="inline-cluster">
      <input
        type="text"
        name="{{ field.name }}"
        x-model="lines[i]"
        class="form-input"
        style="flex:1; font-family:var(--mono); font-size:13px;"
      >
      <button
        type="button"
        @click="remove(i)"
        class="btn-icon btn-icon-danger"
        title="Entfernen"
      >
        <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" stroke="none"><use href="#icon-minus"></use></svg>
      </button>
    </div>
  </template>

  <div>
    {% call btn(attrs='style="gap:5px;" @click="add()"') %}
      <svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor" stroke="none"><use href="#icon-plus"></use></svg>
      Hinzufügen
    {% endcall %}
  </div>
</div>