{% extends "base.html" %}
{% block title %}{{ form.name or 'New Automation' }}{% endblock %}
{% block content %}
<div class="page-head">
  <div><a href="{{ url_for('automations') }}" class="back">{{ icon("back", 14) }} Automations</a>
  <h1>{{ form.name if wf_id else 'New Automation' }}</h1></div>
</div>
{% if understood %}
<div class="card" style="border-left:4px solid var(--accent)">
  <h2>Here's What I Understood</h2>
  <p>{{ understood }}</p>
  <p class="muted small">You asked: “{{ described }}”. Check the details below, change anything, then press <b>Save</b>. Nothing is saved yet.</p>
</div>
{% endif %}
<form method="post" id="auto-form" action="{{ url_for('automation_edit', wf_id=wf_id) if wf_id else url_for('automation_edit') }}">

<div class="card">
  <p class="section-title">1 · The basics</p>
  <div class="field"><label for="name">Name</label>
    <input id="name" type="text" name="name" value="{{ form.name }}" placeholder="e.g. Weekly sales report" required></div>
  <div class="row">
    <div class="field"><label>Who sends it?</label>
      <select name="from">{% for k, r in roles.items() %}<option value="{{ k }}" {{ 'selected' if form['from'] == k }}>{{ r.name }}{% if r.title %} ({{ r.title }}){% endif %}</option>{% endfor %}</select></div>
    <div class="field"><label>Who receives it?</label>
      <select name="to" id="to">
        {% for group_label, opts in recipient_options %}<optgroup label="{{ group_label }}">
          {% for value, label in opts %}<option value="{{ value }}" {{ 'selected' if form.to == value }}>{{ label }}</option>{% endfor %}</optgroup>{% endfor %}
        <optgroup label="Other"><option value="__data" {{ 'selected' if form.to == '__data' }}>An email address in the data…</option></optgroup>
      </select>
      <p class="hint" style="margin-top:6px"><a href="{{ url_for('contacts') }}">Address book</a> for people outside your team</p>
    </div>
  </div>
  <div class="sub" data-show-to="__data"><div class="field"><label>Which column or figure holds the email address?</label>
    <select name="to_data" data-fields="columns" data-current="{{ form.to_data }}"><option value="">Choose…</option></select></div></div>
  <div data-show-to="group:"><label class="check"><input type="checkbox" name="send_separately" {{ 'checked' if form.send_separately }}>
    <span>Send separately to each person in the group<small>Otherwise one email goes to everyone together</small></span></label></div>
  <div class="field"><label>What information does it use?</label>
    <select name="source">{% for k, label in sources.items() %}<option value="{{ k }}" {{ 'selected' if form.source == k }}>{{ label }}</option>{% endfor %}</select></div>
</div>

<div class="card">
  <p class="section-title">2 · When should it go out?</p>
  <div class="choices">
    <label class="choice"><input type="radio" name="trigger" value="schedule" {{ 'checked' if form.trigger == 'schedule' }}>
      <span>On a schedule<small>Same day and time, e.g. every Monday at 9:00</small></span></label>
    <label class="choice"><input type="radio" name="trigger" value="new_data" {{ 'checked' if form.trigger == 'new_data' }}>
      <span>When something new comes in<small>e.g. a new file or new figures</small></span></label>
    <label class="choice"><input type="radio" name="trigger" value="every" {{ 'checked' if form.trigger == 'every' }}>
      <span>At a regular interval<small>e.g. every 3 days</small></span></label>
  </div>

  <div class="sub" data-show="trigger=schedule">
    <div class="choices" style="grid-template-columns:repeat(auto-fit,minmax(150px,max-content))">
      <label class="check"><input type="radio" name="schedule_kind" value="weekly" {{ 'checked' if form.schedule_kind != 'monthly' }}> On certain days of the week</label>
      <label class="check"><input type="radio" name="schedule_kind" value="monthly" {{ 'checked' if form.schedule_kind == 'monthly' }}> Once a month</label>
    </div>
    <div class="field" data-show="schedule_kind=weekly">
      <div class="days">
        {% for d in day_names %}<label><input type="checkbox" name="days" value="{{ d }}" {{ 'checked' if d in form.days }}><span>{{ day_labels[loop.index0][:3] }}</span></label>{% endfor %}
      </div>
      <p class="hint" style="margin-top:8px"><a href="#" data-days="mon,tue,wed,thu,fri">Weekdays</a> · <a href="#" data-days="mon,tue,wed,thu,fri,sat,sun">Every day</a></p>
    </div>
    <div class="field" data-show="schedule_kind=monthly" style="max-width:220px"><label>Day of the month</label>
      <select name="month_day">{% for n in range(1, 29) %}<option value="{{ n }}" {{ 'selected' if form.month_day|int == n }}>{{ h.ordinal(n) }}</option>{% endfor %}</select></div>
    <div class="field" style="max-width:220px"><label>Time</label><input type="time" name="time" value="{{ form.time }}"></div>
  </div>

  <div class="sub" data-show="trigger=every">
    <div class="row" style="max-width:360px">
      <div class="field"><label>Every</label><input type="number" name="every_n" min="1" value="{{ form.every_n }}"></div>
      <div class="field"><label>&nbsp;</label><select name="every_unit">{% for u, label in units if u != 'm' %}<option value="{{ u }}" {{ 'selected' if form.every_unit == u }}>{{ label }}</option>{% endfor %}</select></div>
    </div>
  </div>

  <div class="sub" data-show="trigger=new_data">
    <p class="muted" style="margin:0">It sends as soon as something new appears in the information you picked above. For sales materials, that means as soon as you upload a file.</p>
  </div>

  <label class="check"><input type="checkbox" name="business_hours" {{ 'checked' if form.business_hours }}>
    <span>Only send during business hours<small>If it's outside business hours, wait until they start (set in Settings). Fixed schedules always go at the exact time.</small></span></label>
</div>

<div class="card">
  <p class="section-title">3 · What should the email say?</p>
  {% macro stock_select(name, current, kinds, auto='Choose automatically') -%}
    <select name="{{ name }}" id="{{ name }}"><option value="">{{ auto }}</option>
      {% for gkey, glabel in lib_groups %}{% set opts = library.items()|selectattr('1.group', 'equalto', gkey)|selectattr('1.kind', 'in', kinds)|list %}
        {% if opts %}<optgroup label="{{ glabel }}">{% for p, e in opts %}<option value="{{ p }}" {{ 'selected' if current == p }}>{{ e.name }}</option>{% endfor %}</optgroup>{% endif %}
      {% endfor %}</select>
  {%- endmacro %}
  <div class="field"><label>How should it be written?</label>
    <div class="segmented">
      <label><input type="radio" name="wording" value="stock" {{ 'checked' if form.wording == 'stock' }}><span>Library email</span></label>
      <label><input type="radio" name="wording" value="own" {{ 'checked' if form.wording == 'own' }}><span>My own wording</span></label>
      {% if has_ai %}<label><input type="radio" name="wording" value="ai" {{ 'checked' if form.wording == 'ai' }}><span>AI writes it</span></label>{% endif %}
    </div></div>
  <div class="sub" data-show="wording=stock">
    <p class="hint">Ready-written emails, filled in with the latest figures. <a href="{{ url_for('library') }}" target="_blank">See or edit the library</a>.</p>
    <div class="row">
      <div class="field"><label>Email</label>{{ stock_select('stock', form.stock, ('send',)) }}</div>
      <div class="field"><label>Tone</label><select name="tone"><option value="">Company default</option>
        {% for t, label in tones.items() %}<option value="{{ t }}" {{ 'selected' if form.tone == t }}>{{ label }}</option>{% endfor %}</select></div>
    </div>
  </div>
  <div class="sub" data-show="wording=own">
    <p class="hint">Click a field to insert it; it's filled in with the latest figures.</p>
    <div class="field"><label>Subject</label><input type="text" name="template_subject" value="{{ form.template_subject }}" placeholder="e.g. Overdue invoices: {overdue_total}"></div>
    <div class="field"><label>Message</label><textarea name="template_body" id="template_body" rows="6" placeholder="e.g. Please see this week's overdue invoices below. {summary}&#10;&#10;Could you confirm next steps by Thursday?">{{ form.template_body }}</textarea></div>
    <div class="chips" id="field-chips"></div>
  </div>
  <div class="sub" data-show="wording=ai">
    <p class="hint">Write it as if you were briefing an assistant. Your AI writes the email in your company's voice using the latest information.</p>
    <textarea name="instructions" rows="4" placeholder="e.g. Share this week's sales figures. Give a two-line headline, then ask for their analysis.">{{ form.instructions }}</textarea>
  </div>
  <label class="check"><input type="checkbox" name="include_data_table" {{ 'checked' if form.include_data_table }}>
    <span>Include the figures as a table<small>Shows the data in a branded table under the message</small></span></label>
  <label class="check"><input type="checkbox" name="attach_files" {{ 'checked' if form.attach_files }}>
    <span>Attach the file<small>For sales materials, quotes and other documents</small></span></label>
  <div class="row" style="margin-top:12px">
    <div class="field"><label>Attach a report</label>
      <select name="attach_report"><option value="">No report</option>
        <option value="pdf" {{ 'selected' if form.attach_report == 'pdf' }}>PDF report with chart</option>
        <option value="excel" {{ 'selected' if form.attach_report == 'excel' }}>Excel spreadsheet with chart</option></select></div>
    <div class="field"><label>Also send a copy to (CC)</label>
      <div class="days">{% for k, r in roles.items() %}<label><input type="checkbox" name="cc" value="{{ k }}" {{ 'checked' if k in form.cc }}><span>{{ r.name }}</span></label>{% endfor %}</div></div>
  </div>
</div>

<div class="card">
  <p class="section-title">4 · Automatic reply</p>
  <label class="check"><input type="checkbox" name="reply_enabled" id="reply_enabled" {{ 'checked' if form.reply_enabled }}>
    <span>The recipient replies automatically</span></label>
  <div class="sub" data-show="reply_enabled">
    <div class="row" style="max-width:360px">
      <div class="field"><label>Reply after</label><input type="number" name="reply_delay_n" min="0" value="{{ form.reply_delay_n }}"></div>
      <div class="field"><label>&nbsp;</label><select name="reply_delay_unit">{% for u, label in units %}<option value="{{ u }}" {{ 'selected' if form.reply_delay_unit == u }}>{{ label }}</option>{% endfor %}</select></div>
    </div>
    <label class="check"><input type="checkbox" name="reply_natural" {{ 'checked' if form.reply_natural }}>
      <span>Vary the timing a little<small>Replies don't arrive at exactly the same interval every time, so they feel natural</small></span></label>
    <label class="check"><input type="checkbox" name="reply_vary_day" id="reply_vary_day" {{ 'checked' if form.reply_vary_day }}>
      <span>Vary the day too<small>Sometimes reply the same day, sometimes a working day or two later, at a natural time within business hours</small></span></label>
    <div class="field" data-show="reply_vary_day" style="max-width:240px"><label>Up to</label>
      <select name="reply_vary_days">{% for n in range(1, 6) %}<option value="{{ n }}" {{ 'selected' if form.reply_vary_days == n }}>{{ n }} working day{{ 's' if n > 1 }} later</option>{% endfor %}</select></div>
    <label class="check"><input type="checkbox" name="conv_on" id="conv_on" {{ 'checked' if form.conv_on }}>
      <span>Keep the conversation going<small>Both sides keep replying to each other, e.g. a quote that's negotiated back and forth. Both need to be on your People page: connected here, or set to On their own computer.</small></span></label>
    <div class="sub" data-show="conv_on">
      <div class="row">
        <div class="field" style="max-width:200px"><label>Emails in total</label>
          <input type="number" name="conv_emails" min="3" max="20" value="{{ form.conv_emails }}">
          <p class="hint">Including the first one</p></div>
        <div class="field"><label>What kind of conversation?</label>
          <select name="conv_topic">
            {% for value, kind in conversations.items() %}<option value="{{ value }}" {{ 'selected' if form.conv_topic == value }}>{{ kind.label }}</option>{% endfor %}
          </select></div>
      </div>
      <div class="field"><label>Topic</label>
        <input type="text" name="conv_about" value="{{ form.conv_about }}" placeholder="e.g. the Q4 order for Acme Trading">
        <p class="hint">Each email uses the reply delay above, so a conversation can play out within a day. It ends on agreement: the other side accepts, then you confirm. If a real person replies at any point, the automatic emails stop.</p></div>
    </div>
    <div class="field"><label>How should the reply be written?</label>
      <div class="segmented">
        <label><input type="radio" name="reply_wording" value="stock" {{ 'checked' if form.reply_wording == 'stock' }}><span>Library email</span></label>
        <label><input type="radio" name="reply_wording" value="own" {{ 'checked' if form.reply_wording == 'own' }}><span>My own wording</span></label>
        {% if has_ai %}<label><input type="radio" name="reply_wording" value="ai" {{ 'checked' if form.reply_wording == 'ai' }}><span>AI writes it</span></label>{% endif %}
      </div></div>
    <div class="field" data-show="reply_wording=stock"><label>Reply email</label>{{ stock_select('reply_stock', form.reply_stock, ('reply',), 'Best match for the email (automatic)') }}
      <p class="hint" id="reply-hint" style="margin-top:6px"></p></div>
    <div class="field" data-show="reply_wording=own"><label>Reply wording</label>
      <textarea name="reply_template_body" rows="3" placeholder="e.g. Thanks {sender_first_name}, received. I'll review and come back to you by Friday.">{{ form.reply_template_body }}</textarea></div>
    <div class="field" data-show="reply_wording=ai"><label>What should the AI say?</label>
      <textarea name="reply_instructions" rows="3" placeholder="e.g. Thank them and say you'll review and get back to them shortly.">{{ form.reply_instructions }}</textarea></div>
    <label class="check"><input type="checkbox" name="reply_include_data" {{ 'checked' if form.reply_include_data }}>
      <span>Give the replier the data<small>Turn on when the reply should analyse the figures</small></span></label>
    <label class="check"><input type="checkbox" name="reply_review" {{ 'checked' if form.reply_review }}>
      <span>Let me approve the reply before it's sent</span></label>
  </div>
</div>

<details class="card advanced" id="advanced" {{ 'open' if form.split_column or form.cond_field or form.filter_column or form.route0_field or form.fu0_on or form.next0_then }}>
  <summary><span class="section-title" style="margin:0">More options</span> <span class="muted small">Split by person, conditions, routing, reminders and next steps</span></summary>
  <div class="adv-part">
  <h3>Send Each Person Only Their Part</h3>
  <p class="muted">Split the data by a column (e.g. Project or Customer) and send each value's rows to the right person, instead of one email with everything.</p>
  <div class="field" style="max-width:360px"><label>Split by</label>
    <select name="split_column" id="split_column" data-fields="splittable" data-current="{{ form.split_column }}"><option value="">Don't split, send one email</option></select></div>
  <div id="split-map" class="sub" style="display:none">
    <table class="people" id="split-table"><tr><th>Value</th><th>Send to</th></tr></table>
    <div class="row" style="margin-top:10px">
      <div class="field"><label>Anything else goes to</label>
        <select name="split_otherwise"><option value="">Nobody (skip it)</option>
          {% for group_label, opts in recipient_options %}<optgroup label="{{ group_label }}">{% for value, label in opts %}<option value="{{ value }}" {{ 'selected' if form.split_otherwise == value }}>{{ label }}</option>{% endfor %}</optgroup>{% endfor %}</select></div>
      <div class="field"><label>…or use the email address in column</label>
        <select name="split_email_column" data-fields="columns" data-current="{{ form.split_email_column }}"><option value="">(none)</option></select></div>
    </div>
  </div>
  <template id="recipient-options">{% for group_label, opts in recipient_options %}<optgroup label="{{ group_label }}">{% for value, label in opts %}<option value="{{ value }}">{{ label }}</option>{% endfor %}</optgroup>{% endfor %}</template>
  <script type="application/json" id="split-saved">{{ form.split_map|tojson }}</script>
  </div>
  <div class="adv-part">
  <h3>Only Send When…</h3>
  <p class="muted">Leave these empty to always send.</p>
  <div class="field"><label>Only send if</label>
    <div class="row" style="grid-template-columns:2fr 1.3fr 1fr">
      <select name="cond_field" data-fields="figures" data-current="{{ form.cond_field }}"><option value="">Always send</option></select>
      <select name="cond_op">{% for op, (label, _) in ops.items() %}<option value="{{ op }}" {{ 'selected' if form.cond_op == op }}>{{ label }}</option>{% endfor %}</select>
      <input type="text" name="cond_value" value="{{ form.cond_value }}" placeholder="e.g. 50000">
    </div></div>
  <div class="field"><label>Only include rows where</label>
    <div class="row" style="grid-template-columns:2fr 1.3fr 1fr">
      <select name="filter_column" data-fields="columns" data-current="{{ form.filter_column }}"><option value="">Include every row</option></select>
      <select name="filter_op">{% for op, (label, _) in ops.items() %}<option value="{{ op }}" {{ 'selected' if form.filter_op == op }}>{{ label }}</option>{% endfor %}</select>
      <input type="text" name="filter_value" value="{{ form.filter_value }}" placeholder="e.g. 30">
    </div>
    <p class="hint" style="margin-top:6px">If no rows match, nothing is sent.</p></div>
  </div>
  <div class="adv-part">
  <h3>Send to Someone Else When…</h3>
  <p class="muted">For example: if the discount is more than 10%, send it to the director instead.</p>
  {% for i in range(2) %}
  <div class="row" style="grid-template-columns:2fr 1.2fr 1fr 2fr;margin-bottom:8px">
    <select name="route{{ i }}_field" data-fields="figures" data-current="{{ form['route%d_field' % i] }}"><option value="">(no rule)</option></select>
    <select name="route{{ i }}_op">{% for op, (label, _) in ops.items() %}<option value="{{ op }}" {{ 'selected' if form['route%d_op' % i] == op }}>{{ label }}</option>{% endfor %}</select>
    <input type="text" name="route{{ i }}_value" value="{{ form['route%d_value' % i] }}" placeholder="value">
    <select name="route{{ i }}_to"><option value="">→ send to…</option>{% for group_label, opts in recipient_options %}<optgroup label="{{ group_label }}">{% for value, label in opts %}<option value="{{ value }}" {{ 'selected' if form['route%d_to' % i] == value }}>{{ label }}</option>{% endfor %}</optgroup>{% endfor %}</select>
  </div>
  {% endfor %}
  </div>
  <div class="adv-part">
  <h3>If Nobody Replies</h3>
  <p class="muted">Reminders stop as soon as anyone replies, automatically or in person.</p>
  {% for i in range(2) %}
  <label class="check"><input type="checkbox" name="fu{{ i }}_on" {{ 'checked' if form['fu%d_on' % i] }}>
    <span>{{ 'Send a reminder' if i == 0 else 'Then escalate' }}</span></label>
  <div class="sub" data-show="fu{{ i }}_on">
    <div class="row" style="max-width:520px">
      <div class="field"><label>After</label><input type="number" name="fu{{ i }}_n" min="1" value="{{ form['fu%d_n' % i] }}"></div>
      <div class="field"><label>&nbsp;</label><select name="fu{{ i }}_unit">{% for u, label in units if u in ('h', 'd') %}<option value="{{ u }}" {{ 'selected' if form['fu%d_unit' % i] == u }}>{{ label }}</option>{% endfor %}</select></div>
      <div class="field"><label>CC</label><select name="fu{{ i }}_cc"><option value="">Nobody</option>{% for k, r in roles.items() %}<option value="{{ k }}" {{ 'selected' if form['fu%d_cc' % i] == k }}>{{ r.name }}</option>{% endfor %}</select></div>
    </div>
    <div class="row">
      <div class="field"><label>Library email</label>{{ stock_select('fu%d_stock' % i, form['fu%d_stock' % i], ('follow_up', 'send')) }}</div>
      {% if has_ai %}<div class="field"><label>Or, for the AI: what should it say?</label><input type="text" name="fu{{ i }}_instructions" value="{{ form['fu%d_instructions' % i] }}"></div>{% endif %}
    </div>
  </div>
  {% endfor %}
  </div>
  <div class="adv-part">
  <h3>When Someone Replies…</h3>
  <p class="muted">Start another automation when a reply contains certain words, e.g. “approved” → send the quote to the customer. Words in the quoted earlier email, and phrases like “not approved”, are ignored.</p>
  {% for i in range(2) %}
  <div class="row" style="grid-template-columns:2fr 1fr 2fr;margin-bottom:8px">
    <input type="text" name="next{{ i }}_words" value="{{ form['next%d_words' % i] }}" placeholder="words, e.g. approved, go ahead">
    <select name="next{{ i }}_who"><option value="anyone" {{ 'selected' if form['next%d_who' % i] != 'person' }}>any reply</option><option value="person" {{ 'selected' if form['next%d_who' % i] == 'person' }}>only a real person</option></select>
    <select name="next{{ i }}_then"><option value="">→ then run…</option>{% for wid, wname in other_workflows %}<option value="{{ wid }}" {{ 'selected' if form['next%d_then' % i] == wid }}>{{ wname }}</option>{% endfor %}</select>
  </div>
  {% endfor %}
  </div>
</details>

<div class="card">
  <p class="section-title">5 · Options</p>
  <label class="check"><input type="checkbox" name="review" {{ 'checked' if form.review }}>
    <span>Let me approve each email before it's sent<small>Leave this off for fully automatic sending. Emails needing approval appear under Approvals.</small></span></label>
  <label class="check"><input type="checkbox" name="enabled" {{ 'checked' if form.enabled }}>
    <span>Automation is switched on</span></label>
</div>

<div class="form-foot">
  <div class="actions">
    <button class="btn primary big">Save</button>
    <a class="btn big" href="{{ url_for('automations') }}">Cancel</a>
  </div>
  {% if wf_id %}<button class="btn danger" form="delete-form">Delete Automation</button>{% endif %}
</div>
</form>
{% if wf_id %}<form id="delete-form" method="post" action="{{ url_for('automation_action', wf_id=wf_id, action='delete') }}" data-confirm="Delete this automation? This can’t be undone."></form>{% endif %}
{% endblock %}
{% block scripts %}
<script>
const form = document.getElementById('auto-form');
function refresh() {
  form.querySelectorAll('[data-show]').forEach(el => {
    const [name, value] = el.dataset.show.split('=');
    const inputs = form.querySelectorAll(`[name="${name}"]`);
    let visible;
    if (value === undefined) visible = inputs[0].checked;
    else visible = [...inputs].some(i => i.checked && i.value === value);
    el.style.display = visible ? '' : 'none';
  });
}
const FIELDS = {{ fields|tojson }};
// Responses that go with the chosen email, shown first in the reply list.
const PAIRS = {{ reply_pairs|tojson }};
function suggestReplies() {
  const send = form.querySelector('[name=stock]').value, sel = document.getElementById('reply_stock');
  if (!sel) return;
  const hint = document.getElementById('reply-hint'), keep = sel.value;
  sel.querySelector('optgroup.suggested')?.remove();
  const names = {}; sel.querySelectorAll('option').forEach(o => { if (o.value) names[o.value] = o.textContent; });
  const pairs = (PAIRS[send] || []).filter(p => names[p]);
  if (pairs.length) {
    const g = document.createElement('optgroup'); g.label = 'Suggested for this email'; g.className = 'suggested';
    pairs.forEach(p => g.appendChild(new Option(names[p], p)));
    sel.insertBefore(g, sel.options[1]?.parentElement === sel ? sel.options[1] : sel.querySelector('optgroup'));
    sel.options[0].textContent = 'Best match: ' + names[pairs[0]];
    hint.textContent = pairs.length + ' responses suit this email. They’re listed first.';
  } else {
    sel.options[0].textContent = 'Best match for the email (automatic)';
    hint.textContent = '';
  }
  sel.value = keep;
}
form.querySelector('[name=stock]')?.addEventListener('change', suggestReplies);
suggestReplies();
function nice(t) { return t.replace(/_/g, ' ').replace(/^./, c => c.toUpperCase()); }
function fillFields() {
  const src = form.querySelector('[name=source]').value, f = FIELDS[src] || {figures: [], columns: [], values: {}, template_fields: []};
  f.splittable = Object.keys(f.values || {});
  form.querySelectorAll('[data-fields]').forEach(sel => {
    const keep = sel.value || sel.dataset.current, first = sel.options[0];
    sel.innerHTML = ''; sel.appendChild(first);
    (f[sel.dataset.fields] || []).forEach(v => { const o = new Option(sel.dataset.fields === 'figures' ? nice(v) : v, v); sel.appendChild(o); });
    if (keep && ![...sel.options].some(o => o.value === keep)) sel.appendChild(new Option(nice(keep) + ' (not in current data)', keep));
    sel.value = keep || '';
  });
  const chips = document.getElementById('field-chips'); chips.innerHTML = '';
  (f.template_fields || []).forEach(([key, label]) => {
    const b = document.createElement('button'); b.type = 'button'; b.className = 'chip'; b.textContent = label;
    b.title = '{' + key + '}';
    b.onclick = () => { const t = document.getElementById('template_body'), at = t.selectionStart ?? t.value.length;
      t.value = t.value.slice(0, at) + '{' + key + '}' + t.value.slice(at); t.focus(); };
    chips.appendChild(b);
  });
  drawSplit();
}
const SAVED = JSON.parse(document.getElementById('split-saved').textContent || '{}');
function drawSplit() {
  const src = form.querySelector('[name=source]').value, col = document.getElementById('split_column').value;
  const values = ((FIELDS[src] || {}).values || {})[col] || [], table = document.getElementById('split-table');
  document.getElementById('split-map').style.display = col ? '' : 'none';
  table.querySelectorAll('tr.v').forEach(tr => {
    const sel = tr.querySelector('select'); if (sel.value) SAVED[tr.dataset.value] = sel.value; });
  table.querySelectorAll('tr.v').forEach(tr => tr.remove());
  values.forEach(v => {
    const tr = document.createElement('tr'); tr.className = 'v'; tr.dataset.value = v;
    tr.innerHTML = '<td><input type="hidden" name="split_value"></td><td><select name="split_to"><option value="">(skip / use the fallback below)</option>' +
                   document.getElementById('recipient-options').innerHTML + '</select></td>';
    tr.querySelector('input').value = v; tr.firstChild.append(v);
    tr.querySelector('select').value = SAVED[v] || '';
    table.appendChild(tr);
  });
}
function showForTo() {
  const to = document.getElementById('to').value;
  form.querySelectorAll('[data-show-to]').forEach(el => el.style.display = to.startsWith(el.dataset.showTo) ? '' : 'none');
}
form.querySelector('[name=source]').addEventListener('change', fillFields);
document.getElementById('split_column').addEventListener('change', drawSplit);
document.getElementById('to').addEventListener('change', showForTo);
fillFields(); showForTo();
form.addEventListener('change', refresh);
refresh();
document.querySelectorAll('[data-days]').forEach(a => a.addEventListener('click', e => {
  e.preventDefault();
  const want = a.dataset.days.split(',');
  form.querySelectorAll('[name=days]').forEach(cb => cb.checked = want.includes(cb.value));
}));
</script>
{% endblock %}