{% extends "base.html" %}
{% from "_macros.html" import help %}
{% block title %}Settings — BackupWatch{% endblock %}
{% block main_class %}sv2{% endblock %}
{% block subnav %}{% set subnav_on_settings = true %}{% include "_settings_subnav.html" %}{% endblock %}
{% block content %}
<style>
  /* Users & access design language, scoped to Settings (main.sv2) */
  main.sv2 .sv2-eyebrow { font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:#7c8ba3; margin:8px 0 6px; }
  main.sv2 h1 { font-size:31px; margin:0 0 16px; }
  /* cards */
  main.sv2 .panel { border-radius:14px; padding:20px 22px 22px; margin:16px 0; box-shadow:0 1px 2px rgba(24,42,74,.04); }
  main.sv2 .panel > h2:first-child { font-family:var(--mono); font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#5c6b84; margin:0 0 14px; }
  main.sv2 h3 { font-size:13.5px; color:#182a4a; }
  /* controls */
  main.sv2 form label { font-size:13px; font-weight:500; color:#4a5c78; }
  main.sv2 form label > input, main.sv2 form label > select, main.sv2 form label > textarea { margin-top:7px; }
  main.sv2 input, main.sv2 select, main.sv2 textarea { border:1px solid #e2e8f2; border-radius:9px; padding:9px 12px; font-size:14px; color:#22304a; }
  main.sv2 input:focus, main.sv2 select:focus, main.sv2 textarea:focus { outline:none; border-color:#1666d8; box-shadow:0 0 0 3px rgba(22,102,216,.12); }
  main.sv2 form label.inline { font-size:13.5px; font-weight:400; color:var(--ink); }
  main.sv2 .note { font-size:12.5px; color:#6b7a90; }
  /* buttons: flat controls replace the gradient/lift chrome */
  main.sv2 button { height:38px; padding:0 17px; background:#1666d8; border:none; border-radius:9px; font-size:13.5px; font-weight:600; color:#fff; box-shadow:none; }
  main.sv2 button:hover { background:#0d4ea8; transform:none; box-shadow:none; }
  main.sv2 button:active { transform:none; }
  main.sv2 button.btn-secondary { background:#fff; border:1px solid #e2e8f2; color:#4a5c78; font-weight:500; }
  main.sv2 button.btn-secondary:hover { background:#fff; border-color:#b9c8de; }
  main.sv2 button.danger { background:#fff; border:1px solid #e2e8f2; color:#c3282d; font-weight:500; }
  main.sv2 button.danger:hover { background:#fff; border-color:#e5484d; }
  main.sv2 p button, main.sv2 .note button { height:28px; padding:0 10px; font-size:12px; }
  /* banners, stat cards, link list, save bar */
  main.sv2 .banner { border-radius:10px; font-size:13.5px; }
  main.sv2 .card { border-radius:14px; box-shadow:0 1px 2px rgba(24,42,74,.04); }
  main.sv2 .card .l { color:#7c8ba3; }
  main.sv2 .link-list { border:1px solid #e6ebf3; border-radius:14px; box-shadow:0 1px 2px rgba(24,42,74,.04); overflow:hidden; }
  main.sv2 .save-bar { border-top:1px solid #e6ebf3; }
</style>
<div class="sv2-eyebrow">SETTINGS / CONFIGURATION</div>
<h1>Settings</h1>

{% if cleared %}<div class="banner {{ 'error' if 'off' in cleared else 'ok' }}">{{ cleared }}</div>{% endif %}

<form id="settings-form" method="post" action="/settings">
  <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
  <input type="hidden" name="ui_tab" id="ui-tab" value="">{# JS keeps this on the active tab so Save returns you to it #}
  <div class="panel" id="sec-m365" data-tab-panel="m365">
    <h2>Mailbox</h2>
    <p class="note">Where BackupWatch reads backup-notification emails from. One source is active at a time.</p>
    {# the dropdown is a UI split; storage stays mail_provider graph|imap + imap_auth,
       normalised in the save/test routes (google -> imap + Gmail server defaults) #}
    {% set prov_ui = 'graph' if values.mail_provider != 'imap' else ('google' if values.imap_auth == 'google' else 'imap') %}
    <label>Provider {{ help("Microsoft 365 uses Graph with an Azure app registration. Google Apps covers Gmail and Google Workspace — sign in with Google or use an app password. IMAP works with any other mail server.") }}
      <select name="mail_provider" id="mail-provider">
        <option value="graph" {{ "selected" if prov_ui == 'graph' }}>Microsoft 365</option>
        <option value="google" {{ "selected" if prov_ui == 'google' }}>Google Apps (Gmail / Workspace)</option>
        <option value="imap" {{ "selected" if prov_ui == 'imap' }}>IMAP</option>
      </select></label>

    {# ---- Microsoft 365 (Graph) ---- #}
    <div data-provider="graph">
      <p class="note">Needs an Azure app registration with the <span class="mono">Mail.ReadWrite</span> application permission (admin-consented). Setup:
        <a href="https://learn.microsoft.com/entra/identity-platform/quickstart-register-app" target="_blank" rel="noopener">register an app ↗</a>
        · <a href="https://entra.microsoft.com" target="_blank" rel="noopener">Entra admin center ↗</a>.
        Full step-by-step guide: <span class="mono">Documentation/M365-SETUP.md</span>.</p>
      <label>Tenant ID <input name="graph_tenant_id" value="{{ values.graph_tenant_id }}"></label>
      <label>Client ID <input name="graph_client_id" value="{{ values.graph_client_id }}"></label>
      <label>Client secret <input type="password" name="graph_client_secret"
        placeholder="{{ '•••• stored' if secret_set.graph_client_secret else 'not set' }}"></label>
      <label>Mailbox {{ help("The shared mailbox that receives backup notification emails, e.g. backup@yourmsp.com.") }} <input name="mailbox" value="{{ values.mailbox }}" placeholder="backup@domain.com"></label>
      <label>Mail folder (blank = whole inbox) {{ help("Limit polling to one folder. Leave blank to scan the whole inbox.") }} <input name="mail_folder" value="{{ values.mail_folder }}"></label>
    </div>

    {# ---- Google Apps (Gmail / Workspace) ---- #}
    <div data-provider="google">
      <p class="note">Gmail or Google Workspace. Server details are set automatically
        (<span class="mono">imap.gmail.com</span>, SSL).</p>
      <label>Authentication {{ help("Sign in with Google: OAuth — connect the mailbox with your own Google Cloud OAuth app, no password stored. App password: a Google app password over IMAP (needs 2-step verification).") }}
        <select name="imap_auth" id="imap-auth">
          <option value="google" {{ "selected" if values.imap_auth == "google" }}>Sign in with Google (OAuth)</option>
          <option value="password" {{ "selected" if values.imap_auth != "google" }}>App password</option>
        </select></label>

      <div data-imap-auth="google">
        <label>Google OAuth client ID <input name="google_client_id" value="{{ values.google_client_id }}"></label>
        <label>Google OAuth client secret <input type="password" name="google_client_secret"
          placeholder="{{ '•••• stored' if secret_set.google_client_secret else 'not set' }}"></label>
        <p class="note">In Google Cloud, create an OAuth <strong>Web application</strong> client and add this redirect URI:
          <span class="mono">{{ (values.public_url or '(set Public app URL under Notifications)') }}/settings/google/callback</span></p>
        {% if values.google_email %}<p class="note">Connected as <strong>{{ values.google_email }}</strong>.</p>{% endif %}
        <p>{# buttons live inside the main settings form, so they submit sibling forms by id #}
          <button class="btn-secondary" type="submit" form="google-connect-form">{{ 'Reconnect Google account' if values.google_email else 'Connect Google account' }}</button>
          {% if values.google_email %}
          <button class="btn-secondary" type="submit" form="google-disconnect-form"
            onclick="return confirm('Disconnect this Google account? Polling stops until you reconnect or switch provider.')">Disconnect</button>
          {% endif %}
        </p>
        <p class="note">Save the client ID &amp; secret first, then connect. BackupWatch reads mail over IMAP (XOAUTH2) using the full-mailbox scope; no password is stored.</p>
      </div>

      <div data-imap-auth="password">
        <p class="note">Use an <a href="https://support.google.com/accounts/answer/185833" target="_blank" rel="noopener">App Password ↗</a> (needs 2-step verification, with IMAP enabled). Secrets are encrypted at rest and never shown back.</p>
      </div>
    </div>

    {# ---- generic IMAP ---- #}
    <div data-provider="imap">
      <label>Server (host) {{ help("IMAP hostname, e.g. imap.fastmail.com or your mail server.") }} <input name="imap_host" value="{{ values.imap_host }}" placeholder="imap.example.com"></label>
      <label>Port <input type="number" name="imap_port" value="{{ values.imap_port }}" min="1"></label>
      <label>Security
        <select name="imap_security">
          <option value="ssl" {{ "selected" if values.imap_security != "starttls" }}>SSL/TLS (993)</option>
          <option value="starttls" {{ "selected" if values.imap_security == "starttls" }}>STARTTLS (143)</option>
        </select></label>
    </div>

    {# ---- credentials: generic IMAP always; Google Apps in app-password mode ---- #}
    <div id="mail-creds">
      <label>Username (mailbox address) <input name="imap_username" value="{{ values.imap_username }}" placeholder="backup@domain.com"></label>
      <label>Password / app password <input type="password" name="imap_password"
        placeholder="{{ '•••• stored' if secret_set.imap_password else 'not set' }}"></label>
    </div>

    <div id="mail-folder">{# applies to Google Apps + IMAP; for Gmail a label acts as a folder #}
      <label>Folder {{ help("IMAP mailbox/folder to scan. INBOX is the default. For Gmail, a label acts as a folder.") }} <input name="imap_folder" value="{{ values.imap_folder }}" placeholder="INBOX"></label>
    </div>

    {# ---- shared across providers ---- #}
    <label>Import emails from {{ help("Only import emails received on or after this date. Leave blank to import all unread mail. Useful on first setup to skip old history.") }} <input type="date" name="import_from" value="{{ values.import_from }}"></label>
    <label>On match {{ help("What to do with an email once it's matched to a job: mark it read, move it to a 'Processed' folder, or do nothing. Only matched (or ignored) emails are filed — unmatched / non-backup mail is left in the inbox so it stays visible, and appears in the Review queue for triage. Do nothing leaves matched mail unread in the inbox: already-imported emails are recognised and skipped, but every poll re-reads them, so expect slower polls on a busy mailbox.") }}
      <select name="mark_processed">
        <option value="read" {{ "selected" if values.mark_processed=="read" }}>mark read</option>
        <option value="move" {{ "selected" if values.mark_processed=="move" }}>move to Processed</option>
        <option value="none" {{ "selected" if values.mark_processed=="none" }}>do nothing (leave unread)</option>
      </select></label>
    <label>Poll interval (minutes) {{ help("How often to check the mailbox for new backup emails.") }} <input type="number" name="poll_interval_min" value="{{ values.poll_interval_min }}" min="1"></label>
    {% if test_result %}<div class="banner {{ 'error' if 'FAILED' in test_result else 'ok' }}">{{ test_result }}</div>{% endif %}
    {% if poll_result %}<div class="banner {{ 'error' if 'FAILED' in poll_result else 'ok' }}">{{ poll_result }}</div>{% endif %}
    <div class="actions">
      <button type="submit" class="btn-secondary" formaction="/settings/test-mail" formnovalidate>Test mailbox connection</button>
      <button type="submit" class="btn-secondary" formaction="/settings/poll-now" formnovalidate>Check mailbox now</button>
      <span class="note">Test checks credentials; Check mailbox imports unread email immediately (uses saved settings).</span>
    </div>
  </div>
  <script>
  (function(){
    var prov = document.getElementById("mail-provider");
    var auth = document.getElementById("imap-auth");
    function show(el, on){ if (el) el.style.display = on ? "" : "none"; }
    function sync(){
      var p = prov.value, a = auth ? auth.value : "google";
      document.querySelectorAll("[data-provider]").forEach(function(el){
        show(el, el.getAttribute("data-provider") === p);
      });
      document.querySelectorAll("[data-imap-auth]").forEach(function(el){
        show(el, p === "google" && el.getAttribute("data-imap-auth") === a);
      });
      show(document.getElementById("mail-creds"), p === "imap" || (p === "google" && a === "password"));
      show(document.getElementById("mail-folder"), p !== "graph");
    }
    prov.addEventListener("change", sync);
    if (auth) auth.addEventListener("change", sync);
    sync();
  })();
  </script>

  <div class="panel" id="sec-notify" data-tab-panel="notify">
    <h2>Notifications</h2>
    <label>MSP recipients (comma or newline separated) {{ help("Where failure/missed alerts and the daily summary are sent — your team's inbox(es).") }}
      <textarea name="alert_recipients" rows="2">{{ values.alert_recipients }}</textarea></label>

    <h3>Immediate alerts</h3>
    <p class="note">Email the moment a problem is detected. Turn both off for a quieter <strong>summary-only</strong> setup — the daily summary still reports failures and missed backups.</p>
    <label class="inline"><input type="checkbox" name="alert_on_failure" {{ "checked" if values.alert_on_failure != "false" }}> Email immediately on <strong>failed</strong> backups</label><br />
    <label class="inline"><input type="checkbox" name="alert_on_missed" {{ "checked" if values.alert_on_missed != "false" }}> Email immediately on <strong>missed</strong> backups</label>

    <h3>Daily summary</h3>
    <label class="inline"><input type="checkbox" name="digest_enabled" {{ "checked" if values.digest_enabled != "false" }}> Send a daily summary of every active job's status</label>
    <label>Summary send time (HH:MM) {{ help("Local time of day the daily summary email is sent. Uses the timezone below.") }} <input name="digest_time" value="{{ values.digest_time }}"></label>
    <label>Organisation name {{ help("Your MSP / company name, shown at the top of the daily summary email (e.g. 'Meridian IT Services'). Leave blank to omit it.") }} <input name="org_name" value="{{ values.org_name }}" placeholder="e.g. Meridian IT Services"></label>
    <label>Public app URL {{ help("The address staff use to reach BackupWatch (e.g. https://backup.yourmsp.com). Used for the button link in the daily summary email. Leave blank to omit the button.") }} <input name="public_url" value="{{ values.public_url }}" placeholder="https://backup.yourmsp.com"></label>

    <h3>Health watchdog</h3>
    <label>Alert if no successful mailbox poll in (hours) {{ help("Dead-man's switch: if BackupWatch can't poll the mailbox for this long (e.g. revoked Graph token), it emails the recipients above once, and again when it recovers. Set 0 to turn off.") }} <input type="number" name="health_alert_hours" value="{{ values.health_alert_hours }}" min="0"></label>

    <label>Timezone (blank = server local) {{ help("The zone used for schedules, missed-backup windows, and the summary. Type to search any city/region (e.g. Australia/Melbourne) — named zones automatically adjust for daylight saving. Fixed UTC offsets (e.g. +10:00) do not. Leave blank to use the server's local time.") }}
      <input name="timezone" list="tz-names" value="{{ values.timezone }}" placeholder="Search, e.g. Australia/Melbourne or +10:00" autocomplete="off"></label>
    <datalist id="tz-names">
      {% for name in tz_names %}<option value="{{ name }}"></option>{% endfor %}
    </datalist>
    <p class="note">{{ tz_status }}</p>

    <label>Display timezone (blank = same as above) {{ help("Timestamps shown in the UI — dashboard, events, history, audit — are converted to this zone. Schedules and missed-backup detection keep using the timezone above. Useful when the team viewing BackupWatch sits in a different zone to the one the backups run in.") }}
      <input name="display_timezone" list="tz-names" value="{{ values.display_timezone }}" placeholder="Search, e.g. Australia/Perth or +08:00" autocomplete="off"></label>
  </div>

  <div class="panel" id="sec-smtp" data-tab-panel="notify">
    <h2>Outbound email (alerts &amp; summaries)</h2>
    <label>Send notifications via {{ help("Connected mailbox: alerts are sent AS the same account BackupWatch reads — via Microsoft Graph (needs the Mail.Send application permission, admin-consented) or Google (uses the existing sign-in). No SMTP server needed. Generic IMAP setups can't send, so they always use the SMTP server below.") }}
      <select name="notify_via">
        <option value="smtp" {{ "selected" if values.notify_via != "mailbox" }}>Separate SMTP server (settings below)</option>
        <option value="mailbox" {{ "selected" if values.notify_via == "mailbox" }}>The connected mailbox (Microsoft 365 / Google)</option>
      </select></label>
    <p class="note">With the connected mailbox, notifications come from the monitored address itself —
      for Microsoft 365 add the <span class="mono">Mail.Send</span> application permission to the same app
      registration and admin-consent it. Mail the mailbox sends to itself is ignored automatically, so
      alerts can never loop back into the Review queue.</p>

    <div id="smtp-server-fields" {{ 'style="display:none"'|safe if values.notify_via == "mailbox" }}>
      <h3>SMTP server</h3>
      <label>Host <input name="smtp_host" value="{{ values.smtp_host }}"></label>
      <label>Port <input type="number" name="smtp_port" value="{{ values.smtp_port }}"></label>
      <label>User <input name="smtp_user" value="{{ values.smtp_user }}"></label>
      <label>Password <input type="password" name="smtp_password"
        placeholder="{{ '•••• stored' if secret_set.smtp_password else 'not set' }}"></label>
      <label>From <input name="smtp_from" value="{{ values.smtp_from }}"></label>
      <label class="inline"><input type="checkbox" name="smtp_starttls" {{ "checked" if values.smtp_starttls=="true" }}> STARTTLS</label>
      <p class="note">Port 587 usually needs STARTTLS on; port 465 always uses implicit TLS (the STARTTLS box is ignored). Secrets are encrypted at rest and never shown back.</p>
    </div>
    <script>
    (function(){
      var sel = document.querySelector('select[name="notify_via"]');
      var fields = document.getElementById('smtp-server-fields');
      if (sel && fields) sel.addEventListener('change', function(){
        fields.style.display = sel.value === 'mailbox' ? 'none' : '';
      });
    })();
    </script>

    <h3 style="margin-bottom:4px">Send a test email</h3>
    <label>Send test to {{ help("A one-off email is sent here using the SMTP values above (saved or not). This does not save the settings or use your alert recipients.") }}
      <input type="email" name="test_recipient" placeholder="you@example.com"></label>
    {% if smtp_test %}<div class="banner {{ 'error' if 'FAILED' in smtp_test else 'ok' }}">{{ smtp_test }}</div>{% endif %}
    <div class="actions">
      <button type="submit" class="btn-secondary" formaction="/settings/test-smtp" formnovalidate>Send test email</button>
      <span class="note">Sends now using the values above — no need to save first.</span>
    </div>
  </div>

  <div class="panel" id="sec-automation" data-tab-panel="automation">
    <h2>Automation</h2>
    <label class="inline"><input type="checkbox" name="auto_create_jobs" {{ "checked" if values.auto_create_jobs == "true" }}> Automatically create jobs from new backup emails</label>
    <p class="note">When on, an email from a <strong>recognised client</strong> whose Veeam job name doesn't match any existing job will auto-create that job (active, flagged <em>auto-created</em>) and file the email against it — instead of going to the Review queue. Off = full manual control via Review. Only applies to recognised clients with a detectable Veeam job name; everything else still goes to Review.</p>
    <label>Skip subjects (one per line) {{ help("Emails whose subject contains any of these phrases are never auto-created — they go to the Review queue even when automation is on. Use this for non-backup notifications.") }}
      <textarea name="auto_create_skip" rows="3">{{ values.auto_create_skip }}</textarea></label>
  </div>

  <div class="panel" id="sec-ai" data-tab-panel="automation">
    <h2>AI assistance (optional)</h2>
    <p class="note">Off by default. BackupWatch works fully without it. When enabled, the
      <strong>Find jobs for a client</strong> panel on Onboarding can ask Claude to improve its
      proposed job groupings. Only <strong>subject lines and sender addresses</strong> are sent —
      never message bodies, recipients or attachments. You review the exact payload before each
      request, and every request is recorded on the
      <a href="/settings/ai-activity">AI activity</a> page.</p>
    <label class="inline"><input type="checkbox" name="ai_enabled" {{ "checked" if values.ai_enabled == "true" }}> Enable Claude setup assistance</label>
    <label>Anthropic API key {{ help("Your own key from console.anthropic.com. Encrypted at rest and never shown again. Requests go directly from this server to api.anthropic.com — nothing passes through BackupWatch's servers.") }}
      <input type="password" name="anthropic_api_key" autocomplete="new-password"
             placeholder="{{ 'Set — leave blank to keep' if secret_set.anthropic_api_key else 'sk-ant-…' }}"></label>
    <label>Model
      <select name="ai_model">
        {% for key, label in ai_models.items() %}
        <option value="{{ key }}" {{ "selected" if values.ai_model == key }}>{{ label }}</option>
        {% endfor %}
      </select></label>
    <label>Keep AI activity for
      <input type="number" name="ai_retention_days" min="0" max="3650" value="{{ values.ai_retention_days }}"> days</label>
    <p class="note">Billed to your own Anthropic account at their published rates. A typical
      client search costs a few cents.</p>
    <button type="button" id="ai-test-key" class="btn-secondary">Test key</button>
    <span id="ai-test-result" role="status"></span>
    <script>
      (function () {
        var btn = document.getElementById("ai-test-key");
        var out = document.getElementById("ai-test-result");
        btn.addEventListener("click", function () {
          out.textContent = "Testing…";
          btn.disabled = true;
          var body = new FormData();
          body.append("csrf_token", "{{ csrf_token }}");
          fetch("/settings/ai/test", {method: "POST", body: body})
            .then(function (r) { return r.json(); })
            .then(function (d) { out.textContent = (d.ok ? "✓ " : "✕ ") + d.detail; })
            .catch(function () { out.textContent = "✕ Couldn't reach the server."; })
            .finally(function () { btn.disabled = false; });
        });
      })();
    </script>
  </div>
</form>

{# targets for the Google buttons inside the main form above (forms can't nest) #}
<form id="google-connect-form" method="post" action="/settings/google/connect">
  <input type="hidden" name="csrf_token" value="{{ csrf_token }}"></form>
<form id="google-disconnect-form" method="post" action="/settings/google/disconnect">
  <input type="hidden" name="csrf_token" value="{{ csrf_token }}"></form>

{% set licence_badges = {"free": "b-none", "active": "b-success", "grace": "b-warning",
                          "enforced_free": "b-none", "audit_only": "b-warning",
                          "hard_stop": "b-failure"} %}
{% set licence_labels = {"free": "Free", "active": "Licensed", "grace": "Grace period",
                          "enforced_free": "Free (grace ended)",
                          "audit_only": "Audit only (alerts paused)", "hard_stop": "Hard stop"} %}
<div class="panel" id="sec-licence" data-tab-panel="licence">
  <h2>Licence</h2>
  <p>
    <span class="badge {{ licence_badges.get(licence_state.mode, 'b-none') }}">{{ licence_labels.get(licence_state.mode, licence_state.mode) }}</span>
    &nbsp; Active jobs: <strong>{{ licence_active_jobs }} / {{ "unlimited" if licence_state.job_limit is none else licence_state.job_limit }}</strong>
    {% if licence_state.type_name %}&nbsp; Type: <strong>{{ licence_state.type_name }}</strong>{% endif %}
    {% if licence_state.expires_at %}&nbsp; Expires: <strong>{{ "Never" if licence_state.expires_at.year >= 2999 else licence_state.expires_at.strftime("%Y-%m-%d") }}</strong>{% endif %}
  </p>
  <p class="note">{{ licence_state.reason }}</p>
  {% if licence_state.mode == "grace" %}<p class="note">Every existing job keeps running and keeps being monitored for the whole grace period. New jobs are capped at 5 active until a licence is active.</p>{% endif %}
  {% if licence_state.mode == "audit_only" %}
  <p class="note"><strong>What audit-only mode does:</strong> mailbox polling, job matching, missed-backup detection and event recording all keep running exactly as normal, and the dashboard, history and reports stay live. What stops is outbound email: backup alert emails and the daily digest are held back (queued alerts are kept and send once this clears). BackupWatch&rsquo;s own health watchdog still emails you if polling stalls.</p>
  <p class="note"><strong>How to fix it:</strong> this install hasn&rsquo;t been able to confirm its licence with the licence server for over a month. Let it reach <span class="mono">licence.backupwatch.app</span> again (outbound HTTPS, proxy, DNS) and press <strong>Refresh now</strong> below &mdash; alerting resumes immediately. If the licence itself has lapsed, renew it and activate the key here. New jobs are capped at 5 active until the licence is confirmed.</p>
  {% endif %}
  {% if licence_state.lease_lapsed and licence_state.mode == "grace" %}<p class="note">This grace period is about <em>reaching the licence server</em>, not about your licence expiring. If it isn&rsquo;t back in touch by then, BackupWatch switches to audit-only mode: it keeps monitoring and recording, but stops sending alert emails and the daily digest.</p>{% endif %}
  {% if values.licence_last_checkin %}<p class="note">Last check-in: {{ values.licence_last_checkin }}</p>{% endif %}
  <p class="note">Installation ID:
    {% if values.licence_install_id %}<code>{{ values.licence_install_id }}</code>
    <button type="button" class="btn-secondary" onclick="navigator.clipboard.writeText('{{ values.licence_install_id }}')">Copy</button>{% else %}<span class="muted">assigned after the first check-in</span>{% endif %}
    {{ help("Your install's unique ID. Quote it to support so we can identify this installation.") }}</p>

  {% if licence_result %}<div class="banner {{ 'error' if 'FAILED' in licence_result else 'ok' }}">{{ licence_result }}</div>{% endif %}

  <form method="post" action="/settings/licence/activate" class="row" id="licence-activate">
    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
    <label>Licence key {{ help("Emailed to you when you purchase — format BW-XXXX-XXXX-XXXX-XXXX.") }}
      <input name="licence_key" value="{{ values.licence_key }}" placeholder="BW-XXXX-XXXX-XXXX-XXXX"></label>
    <button type="submit">Activate</button>
  </form>
  <form method="post" action="/settings/licence/refresh" style="display:inline">
    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
    <button type="submit" class="btn-secondary">Refresh now</button>
  </form>
  <p class="note">Free tier: up to 5 active jobs, no key needed. Paid: unlimited active jobs, one yearly subscription. The app checks in with the licence server daily; <strong>Refresh now</strong> does it immediately.</p>
  <p class="note">Every install — free or paid — reports its app version and licence status to
    <span class="mono">licence.backupwatch.app</span> daily, for support and update checks. See our
    <a href="https://backupwatch.app/privacy" target="_blank" rel="noopener">privacy policy</a>.</p>
</div>

<div class="panel" id="sec-email" data-tab-panel="email">
  <h2>Email storage</h2>
  <p class="note">BackupWatch keeps each backup email in its database. "Cleaning up" strips the stored email body from old events to reclaim space — the event itself (status, date, subject, sender) is kept, so history, the dashboard and reports are unaffected. You just can't re-open or export the full email afterwards.</p>

  {% set rdays = (values.email_retention_days or '0')|int %}
  {% set is_custom = rdays not in retention_presets %}
  <div class="cards" style="margin-bottom:16px">
    <div class="card"><div class="n">{{ email_stats.total }}</div><div class="l">emails recorded</div></div>
    <div class="card"><div class="n">{{ email_stats.kept }}</div><div class="l">with content kept {{ help("Events that still hold their full stored email. Cleanup lowers this; the lightweight event records remain for history.") }}</div></div>
    <div class="card"><div class="n">{{ email_stats.bytes|filesizeformat }}</div><div class="l">storage used {{ help("Approximate size of all stored email bodies (text + HTML + preview).") }}</div></div>
  </div>

  <form method="post" action="/settings/email-retention" class="stack">
    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
    <label>Auto-delete stored email content older than
      <select name="preset" id="email-preset">
        <option value="0" {{ 'selected' if rdays == 0 }}>Keep all (never delete)</option>
        <option value="14" {{ 'selected' if rdays == 14 }}>14 days</option>
        <option value="30" {{ 'selected' if rdays == 30 }}>30 days</option>
        <option value="90" {{ 'selected' if rdays == 90 }}>90 days</option>
        <option value="180" {{ 'selected' if rdays == 180 }}>180 days</option>
        <option value="365" {{ 'selected' if rdays == 365 }}>1 year</option>
        <option value="custom" {{ 'selected' if is_custom }}>Custom…</option>
      </select>
    </label>
    <label id="email-custom-wrap" style="{{ '' if is_custom else 'display:none' }}">Custom (days) <input type="number" name="custom" min="1" value="{{ rdays if is_custom else '' }}"></label>
    <div><button type="submit">Save retention</button></div>
  </form>
  <p class="note">Cleanup runs automatically twice a day. It only strips email <em>content</em> — event records are always kept.</p>

  <h3>Manual cleanup</h3>
  <form method="post" action="/settings/email-cleanup" onsubmit="return confirm('Strip stored email content older than the retention period now? Event records are kept, but full emails can no longer be opened or exported.')">
    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
    <button type="submit" class="btn-secondary">Clean up now</button>
  </form>
  <script>
  (function(){
    var sel = document.getElementById('email-preset');
    var wrap = document.getElementById('email-custom-wrap');
    if (sel && wrap) sel.addEventListener('change', function(){ wrap.style.display = sel.value === 'custom' ? '' : 'none'; });
  })();
  </script>
</div>

<div class="panel" id="sec-backup" data-tab-panel="backup">
  <h2>Backup &amp; restore</h2>
  <p class="note">Download a snapshot of everything — clients, jobs, history and settings — or restore from one. The backup bundle also carries this install's encryption key and identity, so a restore onto a new server can still decrypt your saved Graph/SMTP passwords and keeps its licence seat. <strong>The bundle includes your key — store it like a password.</strong></p>
  <p class="note"><strong>Restore is a full administrative replacement:</strong> it replaces users, settings (including saved mail credentials), clients and history. Only restore a backup you created and trust; a valid database cannot prove who made it.</p>
  <form method="get" action="/settings/export-full" style="display:inline">
    <button type="submit">Download full state (.bwfull)</button>
  </form>
  <p class="note" style="margin-top:8px">Full state adds deployment <span class="mono">.env</span>, application logs and retained local backups to the database, encryption key and install identity. <strong>It carries both credentials and your clients' data</strong> — the logs record sender addresses and email subjects, and the retained backups are whole database copies. Encrypt it and store it like a password. Restoring one also <strong>replaces</strong> the current logs and retained backups, so a newer local backup is lost if you restore an older archive.</p>
  <form method="get" action="/settings/export-bundle" style="display:inline">
    <button type="submit" class="btn-secondary">Download app state (.bwbackup)</button>
  </form>
  <p class="note" style="margin-top:8px"><a href="/settings/export">Download database only (.db)</a> — no key, no identity; secrets only decrypt with the original <span class="mono">instance/secret.key</span>.</p>
  <form method="post" action="/settings/import" enctype="multipart/form-data" class="row" style="margin-top:12px" onsubmit="return confirm('Restore REPLACES all current data. A full-state archive also replaces .env, logs and retained local backups. Continue?')">
    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
    <input type="file" name="dbfile" accept=".bwfull,.bwbackup,.db,.sqlite,.sqlite3" required>
    <button type="submit" class="danger">Restore from backup</button>
  </form>
</div>

<div class="panel" id="sec-admin" data-tab-panel="advanced">
  <h2>Administration</h2>
  <ul class="link-list">
    <li><a href="/logs">Logs</a> — view or download the application log.</li>
    <li><a href="/audit">Audit log</a> — record of admin actions (logins, settings changes, updates).</li>
    <li><a href="/updates">Updates</a> — check the running version and apply a new release.</li>
  </ul>
</div>

<div class="panel" id="sec-developer" data-tab-panel="advanced">
  <h2>Developer{% if values.dev_mode == "true" %} <span class="badge b-failure">dev mode</span>{% endif %}</h2>
  <label>Log level {{ help("Standard logs key events (polls, matches, alerts, errors). Verbose adds detailed per-email diagnostics — useful when troubleshooting matching/rules.") }}
    <select name="log_level" form="settings-form">
      <option value="standard" {{ "selected" if values.log_level != "verbose" }}>Standard — key events only</option>
      <option value="verbose" {{ "selected" if values.log_level == "verbose" }}>Verbose — detailed diagnostics</option>
    </select></label>
  <p class="note">Written to <span class="mono">logs/backupwatch.log</span> (rotating, 5 × 1&nbsp;MB) and the console. <a href="/logs">View or download logs →</a></p>

  <label class="inline"><input type="checkbox" name="dev_mode" form="settings-form" {{ "checked" if values.dev_mode == "true" }}> Enable developer mode</label>
  <p class="note">Unlocks the maintenance tools below. Saved with <strong>Save settings</strong>.</p>

  {% if values.dev_mode == "true" %}
  <h3>Maintenance tools</h3>
  <p class="note">Wipes all <strong>clients, jobs, match rules, emails and alerts</strong> for a clean slate while developing. <strong>Settings and users are kept.</strong> This cannot be undone.</p>
  <form method="post" action="/settings/clear-data" onsubmit="return confirm('Delete ALL clients, jobs, rules and emails? Settings and users are kept. This cannot be undone.')">
    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
    <button type="submit" class="danger">Clear clients &amp; emails</button>
  </form>

  <p class="note" style="margin-top:16px">Re-run matching on <strong>all stored emails</strong> against the current jobs &amp; rules — <strong>keeps clients and jobs</strong>, only re-files the emails (and re-detects vendor/status). Use it to retest rule changes without re-fetching the mailbox.</p>
  <form method="post" action="/settings/reprocess-events" onsubmit="return confirm('Re-match all stored emails against current rules? Clients and jobs are kept; email→job assignments are recomputed.')">
    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
    <button type="submit" class="btn-secondary">Reprocess all emails</button>
  </form>

  <p class="note" style="margin-top:16px">Send <strong>all stored emails back to the Review queue</strong> unprocessed — detached from jobs and un-ignored, like a freshly connected mailbox. Nothing is deleted; <strong>clients and jobs are kept</strong>. Follow with <em>Reprocess all emails</em> to re-match, or triage the queue by hand.</p>
  <form method="post" action="/settings/requeue-events" onsubmit="return confirm('Send ALL emails back to the Review queue unprocessed (detached from jobs, un-ignored)? Clients and jobs are kept; nothing is deleted.')">
    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
    <button type="submit" class="btn-secondary">Requeue all emails</button>
  </form>

  <p class="note" style="margin-top:16px">Load a sample dataset (demo clients, jobs, 30 days of events, review-queue items) to explore the app. <strong>Replaces existing clients &amp; emails;</strong> settings and users are kept.</p>
  <form method="post" action="/settings/load-demo" onsubmit="return confirm('Import demo data? This REPLACES all existing clients, jobs and emails. Settings and users are kept.')">
    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
    <button type="submit" class="btn-secondary">Import demo data</button>
  </form>

  <p class="note" style="margin-top:16px">Re-run the first-run setup wizard (Microsoft 365, import date, users, notifications). Existing data and your admin login are kept.</p>
  <form method="post" action="/settings/reset-onboarding" onsubmit="return confirm('Restart the onboarding wizard now? You will be taken to /setup.')">
    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
    <button type="submit" class="btn-secondary">Restart onboarding</button>
  </form>
  {% endif %}
</div>

<div class="save-bar">
  <button type="submit" form="settings-form">Save settings</button>
  <span class="note">Saves <strong>every</strong> section, whichever tab is open.</span>
</div>

<script>
(function(){
  var nav = document.querySelector(".settings-nav");
  var links = Array.prototype.slice.call(nav.querySelectorAll("a[data-tab]"));
  var panels = Array.prototype.slice.call(document.querySelectorAll("[data-tab-panel]"));
  var saveBar = document.querySelector(".save-bar");
  var formTabs = {m365:1, notify:1, automation:1, advanced:1};  // tabs holding form fields
  function activate(tab){
    panels.forEach(function(p){ p.hidden = (p.getAttribute("data-tab-panel") !== tab); });
    links.forEach(function(a){ a.classList.toggle("active", a.getAttribute("data-tab") === tab); });
    saveBar.hidden = !formTabs[tab];
    document.getElementById("ui-tab").value = tab;
  }
  links.forEach(function(a){
    a.addEventListener("click", function(e){
      e.preventDefault();
      activate(a.getAttribute("data-tab"));
      history.replaceState(null, "", a.getAttribute("href"));
    });
  });
  // resolve the tab to open: URL hash (any panel id) > server hint (post-redirect) > first
  var byHash = {"sec-m365":"m365","sec-smtp":"notify","sec-notify":"notify","sec-automation":"automation",
                "sec-licence":"licence","sec-backup":"backup","sec-admin":"advanced","sec-developer":"advanced"};
  activate(byHash[location.hash.slice(1)] || nav.getAttribute("data-initial") || "m365");
})();
</script>
{% endblock %}