{% extends "base.html" %}
{% from "_macros.html" import help %}
{% block title %}Clients — BackupWatch{% endblock %}
{% block main_class %}cl2{% endblock %}
{% block content %}
<style>
  main.cl2 { max-width:1360px; padding:34px 32px 90px; }
  .cl-head { display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; margin-bottom:18px; }
  .cl-head .cl-bulk-btn, .cl-head .cl-add-btn { align-self:center; }
  .cl-head h1 { margin:0; font-size:31px; font-weight:700; letter-spacing:-.02em; color:#182a4a; }
  .cl-head .count { font-size:14px; color:#6b7a90; }
  /* toolbar */
  .cl-tools { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:14px; }
  .cl-search { position:relative; flex:1; max-width:380px; min-width:220px; }
  .cl-search .glyph { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:#8595ad; font-size:14px; }
  .cl-search input { width:100%; box-sizing:border-box; height:40px; padding:0 13px 0 32px; border:1px solid #e2e8f2;
    border-radius:9px; font-size:14px; font-family:inherit; background:#fff; }
  .cl-tools select { height:40px; padding:0 34px 0 13px; border:1px solid #e2e8f2; border-radius:9px;
    font-size:14px; font-family:inherit; background:#fff; color:#22304a; }
  .cl-clear { display:none; background:none; border:0; color:#1666d8; font-size:13.5px; font-weight:500;
    cursor:pointer; font-family:inherit; padding:6px 4px; box-shadow:none; }
  .cl-clear:hover { text-decoration:underline; box-shadow:none; transform:none; }
  /* table */
  .cl-card { background:#fff; border:1px solid #e6ebf3; border-radius:14px; overflow:hidden;
    box-shadow:0 1px 2px rgba(24,42,74,.04); }
  .cl-hd, .cl-row { display:grid; grid-template-columns:110px 1.6fr 130px 90px 2fr; gap:14px; align-items:center;
    padding:0 20px; }
  .cl-hd { background:#f6f8fc; border-bottom:1px solid #e6ebf3; }
  .cl-hd button { all:unset; box-sizing:border-box; cursor:pointer; padding:11px 0; font-family:var(--mono);
    font-size:11px; font-weight:600; letter-spacing:.09em; color:#5c6b84; }
  .cl-hd button:hover { color:#1666d8; }
  .cl-hd button .dir { color:#1666d8; margin-left:5px; }
  .cl-row { border-top:1px solid #f1f4f9; min-height:52px; }
  .cl-row:first-child { border-top:0; }
  .cl-row:hover { background:#f7f9fd; }
  .cl-row .nm a { font-weight:600; color:#1666d8; font-size:14.5px; }
  .cl-row .ids { font-family:var(--mono); font-size:12.5px; color:#5c6b84; white-space:nowrap;
    overflow:hidden; text-overflow:ellipsis; }
  .cl-pill { display:inline-flex; align-items:center; gap:7px; padding:4px 11px 4px 8px; border-radius:999px;
    font-size:12.5px; font-weight:500; }
  .cl-pill i { width:7px; height:7px; border-radius:50%; display:inline-block; }
  .cl-pill.on { background:#e3f4ea; color:#0d7a3d; } .cl-pill.on i { background:#12a150; }
  .cl-pill.off { background:#f2f5fa; color:#5c6b84; } .cl-pill.off i { background:#b9c8de; }
  .cl-empty { display:none; padding:34px 20px; text-align:center; font-size:14.5px; color:#6b7a90; }
  /* bulk edit: the same rows, with their cells swapped for inputs */
  /* sized to match .cl-add-btn exactly — border-box so its 1px border costs no height */
  .cl-bulk-btn { margin-left:auto; box-sizing:border-box; height:38px; padding:0 16px; border-radius:9px;
    font-size:13.5px; font-weight:600; font-family:inherit; cursor:pointer; border:1px solid #e2e8f2;
    background:#fff; color:#4a5c78; box-shadow:none; }
  .cl-bulk-btn:hover { border-color:#1666d8; color:#1666d8; box-shadow:none; transform:none; }
  .cl-bulk-btn.on { background:#1666d8; border-color:#1666d8; color:#fff; }
  .cl-row .e { display:none; }
  .cl-card.editing .cl-row .v { display:none; }
  .cl-card.editing .cl-row .e { display:block; width:100%; box-sizing:border-box; height:34px;
    padding:0 9px; border:1px solid #e2e8f2; border-radius:7px; font-size:13.5px; font-family:inherit;
    background:#fff; color:#22304a; }
  .cl-card.editing .cl-row input.mono { font-family:var(--mono); font-size:12.5px; }
  .cl-card.editing .cl-row .e:focus { border-color:#1666d8; outline:2px solid rgba(22,102,216,.16); }
  .cl-card.editing .cl-row { min-height:50px; padding-top:7px; padding-bottom:7px; }
  .cl-card.editing .cl-row:hover { background:transparent; }
  .cl-card.editing .cl-row.dirty { background:#fffaf0; }
  .cl-card.editing .cl-row.dirty .e { border-color:#e0b155; }
  .cl-bulk-bar { display:none; position:sticky; bottom:0; z-index:5; align-items:center; gap:14px;
    margin-top:-1px; padding:14px 20px; background:#182a4a; border-radius:0 0 14px 14px; }
  .cl-bulk-bar.on { display:flex; }
  .cl-bulk-bar .n { font-size:13.5px; color:#c3d0e6; margin-right:auto; }
  .cl-bulk-bar button { height:38px; padding:0 16px; border-radius:9px; font-size:13.5px;
    font-weight:500; font-family:inherit; cursor:pointer; border:0; box-shadow:none; }
  .cl-bulk-bar .save { background:#1666d8; color:#fff; }
  .cl-bulk-bar .save[disabled] { background:#3d5079; opacity:.5; cursor:default; }
  .cl-bulk-bar .cancel { background:transparent; color:#c3d0e6; border:1px solid #3d5079; }
  /* add clients */
  .cl-add-h { margin:40px 0 14px; font-size:21px; font-weight:700; letter-spacing:-.01em; color:#182a4a; }
  .cl-tabs { display:flex; gap:8px; margin-bottom:14px; }
  .cl-tab { height:38px; padding:0 16px; border-radius:9px; font-size:13.5px; font-weight:500; cursor:pointer;
    font-family:inherit; border:1px solid #e2e8f2; background:#fff; color:#4a5c78; box-shadow:none; }
  .cl-tab:hover { box-shadow:none; transform:none; border-color:#1666d8; color:#1666d8; }
  .cl-tab.on { background:#1666d8; border-color:#1666d8; color:#fff; }
  .cl-form { background:#fff; border:1px solid #e6ebf3; border-radius:14px; padding:24px 26px;
    max-width:680px; box-shadow:0 1px 2px rgba(24,42,74,.04); }
  .cl-form label { display:block; font-size:13.5px; font-weight:500; color:#22304a; margin:0 0 14px; }
  .cl-form input, .cl-form textarea { display:block; width:100%; box-sizing:border-box; margin-top:6px;
    padding:10px 13px; border:1px solid #e2e8f2; border-radius:9px; font-size:14px; font-family:inherit; }
  .cl-form textarea.mono, .cl-form input.mono { font-family:var(--mono); font-size:13px; }
  .cl-coderow { display:flex; gap:12px; }
  .cl-coderow .code { width:120px; flex:none; }
  .cl-coderow .name { flex:1; }
  .cl-help { font-size:12.5px; line-height:1.55; color:#6b7a90; margin:-6px 0 14px; }
  /* CSV import */
  .cl-drop { display:block; border:1.5px dashed #b9c8de; border-radius:12px; background:#fafbfe;
    padding:30px 20px; text-align:center; cursor:pointer; color:#4a5c78; font-size:14px; }
  .cl-drop:hover, .cl-drop.over { border-color:#1666d8; color:#1666d8; }
  .cl-drop .big { font-size:22px; display:block; margin-bottom:6px; }
  .cl-drop .sub { display:block; font-family:var(--mono); font-size:12px; color:#8595ad; margin-top:5px; }
  .cl-links { display:flex; gap:18px; align-items:center; margin:14px 0 0; font-size:13.5px; }
  .cl-links a, .cl-links button { background:none; border:0; padding:0; color:#1666d8; font-weight:500;
    cursor:pointer; font-family:inherit; font-size:13.5px; box-shadow:none; }
  .cl-links button:hover, .cl-links a:hover { text-decoration:underline; box-shadow:none; transform:none; }
  .cl-fmt { display:none; background:#f7f9fd; border:1px solid #eaeff6; border-radius:10px;
    padding:14px 16px; margin-top:14px; font-size:13px; line-height:1.6; color:#4a5c78; }
  .cl-fmt pre { font-family:var(--mono); font-size:12px; background:#fff; border:1px solid #e6ebf3;
    border-radius:8px; padding:10px 12px; overflow-x:auto; margin:10px 0 0; }
  .cl-preview { display:none; border:1px solid #e6ebf3; border-radius:10px; margin-top:14px; overflow:hidden; }
  .cl-preview .hd { display:flex; gap:12px; align-items:center; padding:11px 14px; background:#f6f8fc;
    border-bottom:1px solid #e6ebf3; font-size:13px; }
  .cl-preview .fn { font-family:var(--mono); font-size:12.5px; color:#22304a; }
  .cl-preview .ok { color:#0d7a3d; font-weight:600; }
  .cl-preview .rm { margin-left:auto; background:none; border:0; color:#b3261e; font-size:13px;
    cursor:pointer; font-family:inherit; box-shadow:none; }
  .cl-prow { display:grid; grid-template-columns:90px 1.4fr 2fr; gap:12px; padding:8px 14px;
    border-top:1px solid #f1f4f9; font-size:13px; }
  .cl-prow:first-of-type { border-top:0; }
  .cl-prow .mono, .cl-prow.mono { font-family:var(--mono); font-size:12.5px; color:#5c6b84; }
  .cl-import { margin-top:14px; background:linear-gradient(180deg,#16b06011,#12a150); background-color:#12a150;
    color:#fff; border:0; }
  @media (max-width: 860px) {
    .cl-hd { display:none; }
    .cl-row { grid-template-columns:1fr; gap:6px; padding:12px 20px; }
  }
  .cl-row .cd { font-family:var(--mono); font-size:13px; color:#4a5c78; }
  .cl-add-btn { height:38px; padding:0 16px; background:#1666d8; color:#fff;
    border:none; border-radius:9px; font-size:13.5px; font-weight:600; cursor:pointer; }
  .cl-add-btn:hover { background:#0d4ea8; }
  dialog.cl-dialog { border:none; border-radius:14px; box-shadow:0 22px 50px rgba(13,33,73,.28);
    width:560px; max-width:95vw; padding:22px 26px; color:#22304a; }
  dialog.cl-dialog::backdrop { background:rgba(13,33,73,.4); }
  .cl-dialog-hd { display:flex; align-items:center; margin-bottom:14px; }
  .cl-dialog-hd h2 { margin:0; font-size:18px; color:#182a4a; }
  .cl-dialog-hd .x { margin-left:auto; background:none; border:none; font-size:20px;
    color:#7c8ba3; cursor:pointer; line-height:1; }
  .cl-form-actions { display:flex; gap:10px; margin-top:6px; }
  .cl-form-actions .alt { background:#fff; color:#1666d8; border:1px solid #1666d8; }
</style>

<div class="cl-head">
  <h1>Clients</h1>
  <span class="count" id="cl-count"></span>
  {% if user.role in ['admin', 'tech'] %}
  <button type="button" class="cl-bulk-btn" id="cl-bulk-open">Bulk edit</button>
  <button type="button" class="cl-add-btn" id="cl-add-open">+ Add client</button>
  {% endif %}
</div>
{% if err %}<div class="banner error">{{ err }}</div>{% endif %}
{% if msg %}<div class="banner ok">{{ msg }}</div>{% endif %}

<div class="cl-tools">
  <div class="cl-search"><span class="glyph">⌕</span>
    <input type="text" id="cl-q" placeholder="Search name or identifier…" autocomplete="off"></div>
  <select id="cl-status">
    <option value="">All statuses</option>
    <option value="active">Active</option>
    <option value="paused">Paused</option>
  </select>
  <select id="cl-jobs">
    <option value="">Any job count</option>
    <option value="1">1 job</option>
    <option value="2">2+ jobs</option>
  </select>
  <button type="button" class="cl-clear" id="cl-clear">Clear filters</button>
</div>

{% if user.role in ['admin', 'tech'] %}<form method="post" action="/clients/bulk" id="cl-bulk-form">
<input type="hidden" name="csrf_token" value="{{ csrf_token }}">{% endif %}
<div class="cl-card" id="cl-card">
  <div class="cl-hd">
    <button type="button" data-sort="code">CODE<span class="dir"></span></button>
    <button type="button" data-sort="name">NAME<span class="dir"></span></button>
    <button type="button" data-sort="status">STATUS<span class="dir"></span></button>
    <button type="button" data-sort="jobs">JOBS<span class="dir"></span></button>
    <button type="button" data-sort="idents">IDENTIFIERS<span class="dir"></span></button>
  </div>
  <div id="cl-rows">
  {% for c in clients %}
    {# job_counts is a pre-aggregated {client_id: n} map — reading c.jobs here would lazy-load
       every client's job rows, one query per row #}
    {% set n_jobs = job_counts.get(c.id, 0) %}
    {# data-orig-* are what bulk edit diffs against, so only changed rows are ever submitted #}
    <div class="cl-row" data-name="{{ c.display_name|lower }}" data-code="{{ c.code|lower }}"
         data-status="{{ 'active' if c.active else 'paused' }}"
         data-jobs="{{ n_jobs }}" data-idents="{{ (c.email_identifiers or '')|replace('\n', ' ')|lower }}"
         data-orig-code="{{ c.code or '' }}" data-orig-name="{{ c.name }}"
         data-orig-active="{{ 'on' if c.active else '' }}"
         data-orig-idents="{{ c.email_identifiers or '' }}">
      <span class="cd">
        <span class="v">{{ c.code or "—" }}</span>
        {% if user.role in ['admin', 'tech'] %}
        <input type="hidden" name="id" value="{{ c.id }}" class="e-id" disabled>
        <input class="e mono" name="code" value="{{ c.code or '' }}" maxlength="12"
               placeholder="no code" aria-label="Client code" disabled>{% endif %}
      </span>
      <span class="nm">
        <span class="v"><a href="/clients/{{ c.id }}">{{ c.name }}</a></span>
        {% if user.role in ['admin', 'tech'] %}
        <input class="e" name="name" value="{{ c.name }}" aria-label="Client name" disabled>{% endif %}
      </span>
      <span>
        <span class="v">{% if c.active %}<span class="cl-pill on"><i></i>Active</span>{% else %}<span class="cl-pill off"><i></i>Paused</span>{% endif %}</span>
        {% if user.role in ['admin', 'tech'] %}
        <select class="e" name="active" aria-label="Status" disabled>
          <option value="on"{% if c.active %} selected{% endif %}>Active</option>
          <option value=""{% if not c.active %} selected{% endif %}>Paused</option>
        </select>{% endif %}
      </span>
      <span style="font-size:14px;color:#22304a">{{ n_jobs }}</span>
      <span class="ids">
        <span class="v">{% if c.email_identifiers %}{{ c.email_identifiers|replace("\n", " · ") }}{% else %}—{% endif %}</span>
        {% if user.role in ['admin', 'tech'] %}
        {# stored one-per-line; edited as " · " on a single row and split back on submit #}
        <input class="e mono" name="email_identifiers" aria-label="Email identifiers"
               value="{{ (c.email_identifiers or '')|replace('\n', ' · ') }}" disabled>{% endif %}
      </span>
    </div>
  {% endfor %}
  </div>
  <div class="cl-empty" id="cl-empty">No clients match your filters.</div>
  {% if not clients %}<div class="cl-empty" style="display:block">No clients yet{% if user.role in ['admin', 'tech'] %} — click <strong>Add client</strong> above to start monitoring backups{% endif %}.</div>{% endif %}
  {% if user.role in ['admin', 'tech'] %}
  <div class="cl-bulk-bar" id="cl-bulk-bar">
    <span class="n" id="cl-bulk-n">No changes yet</span>
    <button type="button" class="cancel" id="cl-bulk-cancel">Cancel</button>
    <button type="submit" class="save" id="cl-bulk-save" disabled>Save changes</button>
  </div>
  {% endif %}
</div>
{% if user.role in ['admin', 'tech'] %}</form>{% endif %}

{% if user.role in ['admin', 'tech'] %}
<dialog class="cl-dialog" id="cl-add-dialog">
<div class="cl-dialog-hd">
  <h2>Add clients</h2>
  <button type="button" class="x" id="cl-add-close" aria-label="Close">×</button>
</div>
<div class="cl-tabs">
  <button type="button" class="cl-tab on" data-addtab="single">Add one client</button>
  <button type="button" class="cl-tab" data-addtab="bulk">Bulk import from CSV</button>
</div>

<form method="post" action="/clients" class="cl-form" data-addpane="single">
  <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
  <div class="cl-coderow">
    <label class="code">Client code <input name="code" id="cl-code" class="mono" placeholder="WGCL" maxlength="12"></label>
    <label class="name">Name <input name="name" required></label>
  </div>
  <p class="cl-help">The client code is your MSP's client reference — it prefixes the display name and is used in reports and exports.</p>
  <label>Email identifiers {{ help("How incoming emails are matched to this client. Enter one per line: a sender address (veeam@client.com.au), a domain (client.com.au), or — for shared senders like DropSuite or CloudAlly — a word from the subject (the client name).") }}
    <textarea name="email_identifiers" class="mono" rows="3" placeholder="client.backup@domain.com.au&#10;domain.com.au"></textarea></label>
  <label>Notes <textarea name="notes" rows="2"></textarea></label>
  <div class="cl-form-actions">
    <button type="submit" name="then" value="wizard">Create &amp; set up first job</button>
    <button type="submit" class="alt">Create client only</button>
  </div>
</form>

<div class="cl-form" data-addpane="bulk" style="display:none">
  <label class="cl-drop" id="cl-drop">
    <span class="big">⇪</span>
    Choose a CSV file or drop it here
    <span class="sub">columns: code, name, email_identifiers, notes</span>
    <input type="file" id="cl-file" accept=".csv,text/csv" style="display:none">
  </label>
  <div class="cl-links">
    <a href="#" id="cl-template">⬇ Download CSV template</a>
    <button type="button" id="cl-fmt-toggle">Show format help &amp; examples</button>
  </div>
  <div class="cl-fmt" id="cl-fmt">
    <strong>Columns:</strong> <span class="mono" style="font-family:var(--mono)">code</span> — optional MSP reference ·
    <span style="font-family:var(--mono)">name</span> — required ·
    <span style="font-family:var(--mono)">email_identifiers</span> — |-separated addresses/domains ·
    <span style="font-family:var(--mono)">notes</span> — optional
    <pre id="cl-example"></pre>
  </div>
  <div class="cl-preview" id="cl-preview">
    <div class="hd"><span class="fn" id="cl-fn"></span><span class="ok" id="cl-ready"></span>
      <button type="button" class="rm" id="cl-remove">Remove</button></div>
    <div id="cl-prows"></div>
  </div>
  <form method="post" action="/clients/import" id="cl-import-form" style="margin:0">
    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
    <input type="hidden" name="csv_text" id="cl-csv-text">
    <button type="submit" class="cl-import" id="cl-import-btn" style="display:none"></button>
  </form>
</div>
</dialog>
{% endif %}

<script>
(function () {
  "use strict";
  var TOTAL = {{ clients|length }};
  var ACTIVE = {{ clients|selectattr('active')|list|length }};
  var rows = Array.prototype.slice.call(document.querySelectorAll(".cl-row"));
  var q = document.getElementById("cl-q"), st = document.getElementById("cl-status"),
      jf = document.getElementById("cl-jobs"), clear = document.getElementById("cl-clear"),
      count = document.getElementById("cl-count"), empty = document.getElementById("cl-empty");
  var sortKey = "name", sortDir = 1;

  function apply() {
    var query = q.value.trim().toLowerCase(), status = st.value, jobs = jf.value;
    var shown = 0;
    rows.forEach(function (r) {
      var ok = true;
      if (query) ok = r.dataset.name.indexOf(query) > -1 || r.dataset.idents.indexOf(query) > -1;
      if (ok && status) ok = r.dataset.status === status;
      if (ok && jobs === "1") ok = r.dataset.jobs === "1";
      if (ok && jobs === "2") ok = parseInt(r.dataset.jobs, 10) >= 2;
      r.style.display = ok ? "" : "none";
      if (ok) shown++;
    });
    var filtered = !!(query || status || jobs);
    clear.style.display = filtered ? "" : "none";
    empty.style.display = (filtered && !shown) ? "block" : "none";
    count.textContent = filtered
      ? shown + " of " + TOTAL + " client" + (TOTAL === 1 ? "" : "s") + " shown"
      : TOTAL + " client" + (TOTAL === 1 ? "" : "s") + " · " + ACTIVE + " active";
  }
  function sortRows() {
    var parent = document.getElementById("cl-rows");
    rows.sort(function (a, b) {
      if (sortKey === "jobs") return (parseInt(a.dataset.jobs, 10) - parseInt(b.dataset.jobs, 10)) * sortDir;
      return a.dataset[sortKey].localeCompare(b.dataset[sortKey]) * sortDir;
    });
    rows.forEach(function (r) { parent.appendChild(r); });
    document.querySelectorAll(".cl-hd button").forEach(function (b) {
      b.querySelector(".dir").textContent = b.dataset.sort === sortKey ? (sortDir === 1 ? "▲" : "▼") : "";
    });
  }
  [q, st, jf].forEach(function (el) { el.addEventListener("input", apply); });
  clear.addEventListener("click", function () { q.value = ""; st.value = ""; jf.value = ""; apply(); });
  document.querySelectorAll(".cl-hd button").forEach(function (b) {
    b.addEventListener("click", function () {
      if (sortKey === b.dataset.sort) { sortDir = -sortDir; } else { sortKey = b.dataset.sort; sortDir = 1; }
      sortRows();
    });
  });
  sortRows(); apply();

  // ---- bulk edit ----
  // Every input starts disabled, so a browser only ever posts the rows it actually changed:
  // entering edit mode enables them all, and submit disables the rows that are still clean.
  var bulkBtn = document.getElementById("cl-bulk-open");
  if (bulkBtn) (function () {
    var card = document.getElementById("cl-card"), bar = document.getElementById("cl-bulk-bar"),
        form = document.getElementById("cl-bulk-form"), save = document.getElementById("cl-bulk-save"),
        nLabel = document.getElementById("cl-bulk-n"),
        cancel = document.getElementById("cl-bulk-cancel");
    var editing = false;

    // identifiers are stored one per line but edited on a single row, joined by " · "
    function toLines(v) {
      return v.split(/[\n·]+/).map(function (s) { return s.trim(); })
              .filter(Boolean).join("\n");
    }
    function fields(row) { return row.querySelectorAll(".e, .e-id"); }
    function isDirty(row) {
      var d = row.dataset;
      return row.querySelector('[name=code]').value.trim().toUpperCase() !== d.origCode.toUpperCase()
          || row.querySelector('[name=name]').value.trim() !== d.origName
          || row.querySelector('[name=active]').value !== d.origActive
          || toLines(row.querySelector('[name=email_identifiers]').value) !== toLines(d.origIdents);
    }
    function refresh() {
      var n = 0;
      rows.forEach(function (r) {
        var d = isDirty(r);
        r.classList.toggle("dirty", d);
        if (d) n++;
      });
      save.disabled = !n;
      save.textContent = n ? "Save " + n + " change" + (n === 1 ? "" : "s") : "Save changes";
      nLabel.textContent = n
        ? n + " client" + (n === 1 ? "" : "s") + " edited"
        : "No changes yet";
      return n;
    }
    function setMode(on) {
      editing = on;
      card.classList.toggle("editing", on);
      bar.classList.toggle("on", on);
      bulkBtn.classList.toggle("on", on);
      bulkBtn.textContent = on ? "Done" : "Bulk edit";
      rows.forEach(function (r) {
        fields(r).forEach(function (el) { el.disabled = !on; });
      });
      if (on) refresh();
    }
    bulkBtn.addEventListener("click", function () { setMode(!editing); });
    cancel.addEventListener("click", function () {
      rows.forEach(function (r) {
        r.querySelector('[name=code]').value = r.dataset.origCode;
        r.querySelector('[name=name]').value = r.dataset.origName;
        r.querySelector('[name=active]').value = r.dataset.origActive;
        r.querySelector('[name=email_identifiers]').value =
          r.dataset.origIdents.split("\n").filter(Boolean).join(" · ");
        r.classList.remove("dirty");
      });
      setMode(false);
    });
    card.addEventListener("input", function (e) {
      if (!editing) return;
      if (e.target.name === "code") e.target.value = e.target.value.toUpperCase();
      refresh();
    });
    card.addEventListener("change", function () { if (editing) refresh(); });
    form.addEventListener("submit", function (e) {
      if (!refresh()) { e.preventDefault(); return; }
      rows.forEach(function (r) {
        // clean rows drop out of the POST entirely, keeping the parallel arrays aligned
        var d = r.classList.contains("dirty");
        fields(r).forEach(function (el) { el.disabled = !d; });
        // identifiers go up still " · "-joined: a single-line input cannot hold the newlines
        // they are stored with, so the server splits them (bulk_update_clients)
      });
    });
    // coming Back to a bfcache'd page would otherwise restore the table mid-submit, with every
    // clean row's inputs still disabled from the submit handler
    window.addEventListener("pageshow", function (e) { if (e.persisted) setMode(editing); });
    window.addEventListener("beforeunload", function (e) {
      if (editing && rows.some(function (r) { return r.classList.contains("dirty"); })) {
        e.preventDefault(); e.returnValue = "";
      }
    });
  })();

  // ---- add tabs ----
  document.querySelectorAll("[data-addtab]").forEach(function (t) {
    t.addEventListener("click", function () {
      document.querySelectorAll("[data-addtab]").forEach(function (x) { x.classList.toggle("on", x === t); });
      document.querySelectorAll("[data-addpane]").forEach(function (p) {
        p.style.display = p.getAttribute("data-addpane") === t.getAttribute("data-addtab") ? "" : "none";
      });
    });
  });
  var dlg = document.getElementById("cl-add-dialog");
  var openBtn = document.getElementById("cl-add-open");
  if (openBtn && dlg) {
    openBtn.addEventListener("click", function () { dlg.showModal(); });
    document.getElementById("cl-add-close").addEventListener("click", function () { dlg.close(); });
    dlg.addEventListener("click", function (e) { if (e.target === dlg) dlg.close(); });
  }
  var code = document.getElementById("cl-code");
  if (code) code.addEventListener("input", function () { code.value = code.value.toUpperCase(); });

  // ---- CSV import ----
  var TEMPLATE = "code,name,email_identifiers,notes\n" +
    "WGCL,Warrnambool Golf Club,info@warrnamboolgolf.com.au|warrnamboolgolf.com.au,Nightly Veeam\n" +
    "PERM,Permewans Hamilton,office@permewanshamilton.com.au,\n" +
    ",Ponting Brothers,pontingbros.com.au,No code yet\n";
  var ex = document.getElementById("cl-example");
  if (!ex) return;                                   // read-only role: no add section
  ex.textContent = TEMPLATE;
  document.getElementById("cl-template").addEventListener("click", function (e) {
    e.preventDefault();
    var a = document.createElement("a");
    a.href = "data:text/csv;charset=utf-8," + encodeURIComponent(TEMPLATE);
    a.download = "backupwatch-clients-template.csv";
    document.body.appendChild(a); a.click(); a.remove();
  });
  var fmtBtn = document.getElementById("cl-fmt-toggle"), fmt = document.getElementById("cl-fmt");
  fmtBtn.addEventListener("click", function () {
    var open = fmt.style.display === "block";
    fmt.style.display = open ? "none" : "block";
    fmtBtn.textContent = open ? "Show format help & examples" : "Hide format help";
  });
  var drop = document.getElementById("cl-drop"), file = document.getElementById("cl-file");
  var preview = document.getElementById("cl-preview"), importBtn = document.getElementById("cl-import-btn");
  function parseCsv(text) {                          // preview only — the server re-parses on import
    var out = [];
    text.split(/\r?\n/).forEach(function (line, i) {
      if (!line.trim()) return;
      var cells = line.split(",").map(function (c) { return c.trim(); });
      if (i === 0 && (cells[0].toLowerCase() === "code" || cells[0].toLowerCase() === "name")) return;
      var name = cells[1] || "";
      if (!name) return;
      out.push({ code: (cells[0] || "").toUpperCase(), name: name,
                 idents: (cells[2] || "").split("|").filter(Boolean).join(" · ") });
    });
    return out;
  }
  function showPreview(name, text) {
    var rows2 = parseCsv(text);
    document.getElementById("cl-fn").textContent = name;
    document.getElementById("cl-ready").textContent =
      rows2.length + " client" + (rows2.length === 1 ? "" : "s") + " ready to import";
    var holder = document.getElementById("cl-prows");
    holder.innerHTML = "";
    rows2.slice(0, 5).forEach(function (r) {
      var d = document.createElement("div");
      d.className = "cl-prow";
      [r.code || "—", r.name, r.idents || "—"].forEach(function (v, i2) {
        var s = document.createElement("span");
        if (i2 !== 1) s.className = "mono";
        s.textContent = v;
        d.appendChild(s);
      });
      holder.appendChild(d);
    });
    document.getElementById("cl-csv-text").value = text;
    preview.style.display = "block";
    importBtn.style.display = rows2.length ? "" : "none";
    importBtn.textContent = "Import " + rows2.length + " client" + (rows2.length === 1 ? "" : "s");
  }
  function readFile(f) {
    if (!f) return;
    var r = new FileReader();
    r.onload = function () { showPreview(f.name, String(r.result)); };
    r.readAsText(f);
  }
  file.addEventListener("change", function () { readFile(file.files[0]); });
  ["dragover", "dragenter"].forEach(function (evn) {
    drop.addEventListener(evn, function (e) { e.preventDefault(); drop.classList.add("over"); });
  });
  ["dragleave", "drop"].forEach(function (evn) {
    drop.addEventListener(evn, function (e) { e.preventDefault(); drop.classList.remove("over"); });
  });
  drop.addEventListener("drop", function (e) {
    if (e.dataTransfer.files.length) readFile(e.dataTransfer.files[0]);
  });
  document.getElementById("cl-remove").addEventListener("click", function () {
    preview.style.display = "none"; importBtn.style.display = "none";
    document.getElementById("cl-csv-text").value = ""; file.value = "";
  });
})();
</script>
{% endblock %}