{% extends "base.html" %}
{% import "macros.html" as m %}
{% block title %}Settings{% endblock %}
{% macro status(done, yes='done', no='pending') %}<span class="setup-status {{ 'done' if done else 'pending' }}">{{ yes if done else no }}</span>{% endmacro %}
{% macro step_errors(step) %}{% set errs = form_errors.get(step, {}) %}{% if errs %}<div class="errors"><ul>{% for msg in errs.values() %}<li>{{ msg }}</li>{% endfor %}</ul></div>{% endif %}{% endmacro %}
{% macro how(href) %}<a class="how" href="{{ href }}">How it works</a>{% endmacro %}
{#- "or describe it": the same change, built by your own agent (Make it yours). -#}
{% macro describe(section) %}<a class="describe-it" href="{{ starter_link(settings_starters[section]) }}">or describe it</a>{% endmacro %}
{#- The page is five tabs. Each lists the section ids it holds, so a link or a
    redirect to a section (/settings#bcc) opens the tab it is on. -#}
{% set groups = [
  ('general', 'General', ['make-it-yours', 'you', 'enrichment', 'appearance', 'support', 'about']),
  ('mail', 'Email & calendar', ['bcc', 'send', 'calendar']),
  ('crm', 'Your CRM', ['playbook', 'fields', 'messaging', 'task-types', 'stages', 'outcomes']),
  ('backup', 'Data', ['backup', 'export']),
  ('advanced', 'Advanced', ['schedule', 'access', 'mcp', 'doctor']),
] %}
{% set lb = local_backup %}
{% set attention = {
  'general': not state.you,
  'mail': inbox_alert or send_banner,
  'backup': lb.level != 'ok',
} %}
{% macro group_start(key) %}{% for gid, label, sections in groups if gid == key %}<div class="settings-group" id="tab-{{ gid }}"{% for s in sections if s in form_errors %}{% if loop.first %} data-error{% endif %}{% endfor %}>{% endfor %}{% endmacro %}
{% block content %}
<h1>Settings</h1>
{% if setup_pending %}<p class="small">A few steps are still open below. <a href="/">Skip for now</a></p>{% endif %}
<nav class="settings-tabs" aria-label="Settings">
  {% for gid, label, sections in groups %}
  {%- set flagged = attention.get(gid) or (sections | select('in', form_errors) | list) -%}
  <a href="#tab-{{ gid }}" data-group="tab-{{ gid }}">{{ label }}{% if flagged %}<span class="dot" role="img" aria-label="needs a look" title="Needs a look"></span>{% endif %}</a>
  {% endfor %}
</nav>

{# ================================================================= General #}
{{ group_start('general') }}
<section class="setup-step" id="make-it-yours">
  <div class="setting-head"><h2>Make it yours with your AI</h2>{{ how('/help/adjust') }}</div>
  <p class="summary">Describe a change (a field, a dashboard, a new look, a routine) and your own AI agent builds it in your data folder, one undoable commit each.</p>
  <p class="meta">{% if handoff.how == 'copy' %}You get a prompt to paste; name your agent under AI below for a one-click button.{% else %}Requests go to {{ handoff.label }}; change that under AI below.{% endif %}</p>
  <div class="actions"><a class="button primary" href="/yours">Open Make it yours</a></div>
</section>

<section class="setup-step" id="you">
  <div class="setting-head"><h2>You</h2>{{ status(state.you) }}</div>
  {% if state.you %}
  <p class="summary">{{ you.name }}</p>
  <p class="meta">Sends mail from {{ you.addresses }}</p>
  {% else %}
  <p class="summary">Your name signs the drafts; mail from your addresses counts as outbound.</p>
  {% endif %}
  {{ step_errors('you') }}
  <details class="edit"{% if not state.you or 'you' in form_errors %} open{% endif %}>
    <summary>{{ 'Change name or addresses' if state.you else 'Your name and addresses' }}</summary>
    <form method="post" action="/settings/you" class="record-form">
      <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
      <label>Your name <input name="name" value="{{ you.name }}" required></label>
      <label>Addresses you send mail from (comma-separated; the first is your main address)
        <input name="addresses" value="{{ you.addresses }}" required></label>
      <button type="submit">Save</button>
    </form>
  </details>
</section>

<section class="setup-step" id="enrichment">
  <div class="setting-head"><h2>AI: Enrich and Ask the Hermit</h2>
    {%- if enrich_status.available %}<span class="setup-status done">In use: {{ enrich_status.provider }}</span>
    {%- else %}<span class="setup-status pending">Unavailable</span>{% endif %}{{ how('/help/settings#ai-enrich-and-ask-the-hermit') }}</div>
  <p class="summary">Fills a record's empty fields and answers questions about your CRM, using an AI command-line tool you already have.</p>
  {% if not enrich_status.available %}
  <p class="warning">Unavailable: {{ enrich_status.reason }}</p>
  <p class="small">Under launchd or systemd (<code>hermitcrm schedule install --serve</code>) the PATH is bare: put the CLI in <code>/usr/local/bin</code>, <code>/opt/homebrew/bin</code> or <code>~/.local/bin</code>, or give its full path as the command below.</p>
  {% endif %}
  {{ step_errors('enrichment') }}
  <form method="post" action="/settings/enrichment" class="record-form">
    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
    <label>Tool
      <select name="provider">
        {% for p in enrich_providers %}<option value="{{ p }}"{% if p == enrich_form.provider %} selected{% endif %}>{{ 'auto: the first of claude, codex, gemini, grok' if p == 'auto' else p }}</option>{% endfor %}
      </select>
    </label>
    <fieldset class="switch across">
      <legend>Account</legend>
      <label><input type="radio" name="account" value="subscription"{% if enrich_form.account != 'api' %} checked{% endif %}> Subscription: a ChatGPT, Claude or Gemini plan</label>
      <label><input type="radio" name="account" value="api"{% if enrich_form.account == 'api' %} checked{% endif %}> API key</label>
    </fieldset>
    <fieldset class="switch across">
      <legend>Model</legend>
      <label><input type="radio" name="tier" value="medium"{% if enrich_form.tier != 'strong' %} checked{% endif %}> Medium: {{ model_label(tier_models.medium) }} (default)</label>
      <label{% if tier_models.strong %} title="Answers made on the medium model offer &quot;Retry with {{ model_label(tier_models.strong) }}&quot;"{% endif %}><input type="radio" name="tier" value="strong"{% if enrich_form.tier == 'strong' %} checked{% endif %}> Strong: {{ model_label(tier_models.strong) }}</label>
    </fieldset>
    <details class="edit"{% if enrich_form.provider == 'custom' or 'enrichment' in form_errors %} open{% endif %}>
      <summary>Command, timeout and model ids</summary>
      <div class="row">
        <label class="grow">Command (empty: the tool's own) <input name="command" value="{{ enrich_form.command }}" placeholder="/opt/homebrew/bin/claude"></label>
        <label>Timeout (seconds) <input name="timeout" value="{{ enrich_form.timeout }}" inputmode="numeric" size="6"></label>
      </div>
      <div class="row">
        <label class="grow">Medium model (empty: the default) <input name="model" value="{{ enrich_form.model }}" placeholder="{{ tier_models.medium if not enrich_form.model else '' }}"></label>
        <label class="grow">Strong model (empty: the default) <input name="model_strong" value="{{ enrich_form.model_strong }}" placeholder="{{ tier_models.strong if not enrich_form.model_strong else '' }}"></label>
      </div>
      <p class="small">Only for a CLI that names a model differently; an id set here is used on any account.
        {%- call m.hint('model-ids-help', 'Why a subscription asks for no model') %} A subscription is not entitled to every API model id, so on one Hermit CRM asks for no particular model where that matters.{% endcall %}</p>
    </details>
    <button type="submit">Save</button>
  </form>
  <h3>Make it yours hands requests to</h3>
  <form method="post" action="/settings/adjust-agent" class="record-form">
    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
    <label>Agent
      <select name="agent">
        {% for value, label in agent_choices %}<option value="{{ value }}"{% if value == handoff.chosen %} selected{% endif %}>{{ label }}</option>{% endfor %}
      </select>
    </label>
    <p class="small">The agent that builds what you describe under <a href="/yours">Make it yours</a>, in <code>{{ handoff.folder_shown }}</code>.
      {%- call m.hint('agent-handoff-help', 'How each agent is started') %} Claude Code and Cursor open with one click; Codex and Gemini CLI get a command to paste in a terminal; with none, you copy the prompt into any agent.{% endcall %}</p>
    <button type="submit">Save</button>
  </form>
</section>

<section class="setup-step" id="appearance">
  <div class="setting-head"><h2>Appearance</h2></div>
  {{ step_errors('appearance') }}
  <form method="post" action="/settings/appearance" class="record-form theme-form">
    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
    <fieldset class="switch across">
      <legend>Night mode</legend>
      {% for t, label in [('light', 'Off'), ('dark', 'On'), ('system', 'Follow the system')] %}
      <label><input type="radio" name="theme" value="{{ t }}"{% if t == theme %} checked{% endif %}> {{ label }}</label>
      {% endfor %}
    </fieldset>
    <button type="submit">Save</button>
  </form>
  <form method="post" action="/settings/date-format" class="record-form date-format-form">
    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
    <fieldset class="switch across">
      <legend>Date format</legend>
      {% for key, spec in date_formats.items() %}
      <label><input type="radio" name="date_format" value="{{ key }}"{% if key == date_format %} checked{% endif %}> {{ spec[2] }} <span class="small faint">({{ spec[0] }})</span></label>
      {% endfor %}
    </fieldset>
    <p class="small">How dates read and are typed everywhere in the app: lists, forms, reports. Your files and exports always keep YYYY-MM-DD.</p>
    <button type="submit">Save</button>
  </form>
  <details class="edit"{% if theme_file.problems %} open{% endif %}>
    <summary>Your own look: {{ 'in use' if theme_file.active else 'not in use' }}</summary>
    {% if theme_file.active %}
    <p class="small theme-status"><strong>In use:</strong> <code>{{ theme_file.path }}</code> sets colours and fonts. Delete the file to go back to the default look.</p>
    {% if theme_file.problems %}
    <ul class="small provider-note warning">
      {% for line, problem in theme_file.problems %}<li>Line {{ line }}: {{ problem }}</li>{% endfor %}
    </ul>
    {% endif %}
    {% else %}
    <p class="small theme-status"><strong>Not in use.</strong> Ask your AI tool to write <code>{{ theme_file.path }}</code>, for example "make my Hermit CRM blue"; <a href="/help/settings">Help > Settings</a> lists what you can change.</p>
    <pre class="small theme-example" title="What the file looks like">{{ theme_example }}</pre>
    {% endif %}
  </details>
</section>

<section class="setup-step" id="support">
  <div class="setting-head"><h2>Support Hermit</h2></div>
  <p>Hermit CRM is free and open source, and stays that way. A tip on Ko-fi supports its development.</p>
  <p><a class="button" href="{{ support_url }}" target="_blank" rel="noopener">Support Hermit on Ko-fi</a></p>
  <p class="small">Opens <code>{{ support_url | replace('https://', '') }}</code> in your browser; Hermit CRM sends nothing to Ko-fi.</p>
</section>

<section class="setup-step" id="about">
  <div class="setting-head"><h2>About</h2></div>
  <table class="about">
    {%- set up = upgrade_banner() %}
    <tr><th>Version</th><td>Hermit CRM v{{ about.version }}{% if up.kind == 'restart' %} &mdash; <span class="update-notice">v{{ up.version }} is installed but this server still runs v{{ up.running }}.</span>{% if up.can %}{{ m.upgrade_form(up) }}{% else %} <span class="small">{{ up.why_not }}</span>{% endif %}{% elif up.kind == 'available' %} &mdash; <span class="update-notice">v{{ up.version }} available:</span>{% if up.can %}{{ m.upgrade_form(up) }}{% else %} <code>{{ up.command }}</code>{% if up.why_not %} <span class="small">({{ up.why_not }})</span>{% endif %}{% endif %}{% elif about.update_note %} <span class="small">({{ about.update_note }})</span>{% endif %} <a class="small" href="/help/changelog">Changelog</a></td></tr>
    <tr><th>Data folder</th><td><code>{{ about.data_dir }}</code></td></tr>
    <tr><th>Data format</th><td>{% if about.data_format is none %}unknown{% else %}{{ about.data_format }}{% if about.data_format != about.latest_format %} (this Hermit CRM writes {{ about.latest_format }}; run <code>hermitcrm migrate</code>){% endif %}{% endif %}</td></tr>
    <tr><th>Help</th><td><a href="/help">All help topics</a>, or <code>hermitcrm help</code></td></tr>
  </table>
</section>
</div>

{# ======================================================== Email & calendar #}
{{ group_start('mail') }}
<section class="setup-step" id="bcc">
  <div class="setting-head"><h2>BCC capture</h2>{{ status(state.bcc) }}{{ how('/help/settings#bcc-capture') }}</div>
  {% if state.bcc and bcc_form.address %}
  <p class="summary">BCC <code>{{ bcc_form.address }}</code> when you email a prospect, or forward a thread to it, and the mail is logged on the right company.</p>
  {% else %}
  <p class="summary">Put a tracking address in BCC when you email a prospect, and the mail is logged on the right company.
    {%- call m.hint('bcc-gmail-help', 'Which address to use with Gmail') %} With Gmail, <code>you+crm@gmail.com</code> reaches your own inbox, so no second account is needed.{% endcall %}</p>
  {% endif %}
  <div class="bcc-status">
    {% if last_run %}
      {% if last_run.ok %}
        <p class="meta">Last import {{ ui_datetime(last_run.at) }}: {{ last_run.summary }}</p>
      {% else %}
        <p class="error">Last import {{ ui_datetime(last_run.at) }} failed: {{ last_run.error }}</p>
      {% endif %}
    {% else %}
      <p class="meta">No import has run yet.</p>
    {% endif %}
    {% if inbox_alert and last_run and last_run.ok %}<p class="error">{{ inbox_alert }}</p>{% endif %}
    <p class="meta">Mail it cannot place waits on <a href="/#to-file">Home, under To file</a>.</p>
  </div>
  <div class="actions">
    <form method="post" action="/bcc/import" class="inline"><button type="submit">Import now</button></form>
    {% if gmail_filter %}
    <form method="post" action="/settings/bcc/test" class="inline">
      <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
      <button type="submit">Test connection (dry run)</button>
    </form>
    {% endif %}
  </div>
  {{ step_errors('bcc') }}
  <details class="edit"{% if not state.bcc or 'bcc' in form_errors or (last_run and not last_run.ok) %} open{% endif %}>
    <summary>{{ 'Change mailbox' if state.bcc else 'Set up the mailbox' }}</summary>
    <form method="post" action="/settings/bcc" class="record-form" id="bcc-form">
      <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
      <label>Mail provider
        <select id="bcc-provider" aria-describedby="bcc-provider-note">
          <option value="">other (type the server yourself)</option>
          {% for key, p in mail_providers.items() %}<option value="{{ key }}" data-host="{{ p.imap_host }}"{% if bcc_form.imap_host == p.imap_host %} selected{% endif %}>{{ p.label }}</option>{% endfor %}
        </select>
      </label>
      {% for key, p in mail_providers.items() %}
      <p class="small provider-note{% if not p.works %} warning{% endif %}" data-provider="{{ key }}" id="{{ 'bcc-provider-note' if loop.first else '' }}"{% if bcc_form.imap_host != p.imap_host %} hidden{% endif %}>
        <strong>{{ p.label }}:</strong> {{ p.note }}{% if p.password_url %} <a href="{{ p.password_url }}" target="_blank" rel="noopener">Create the app password</a>.{% endif %}
      </p>
      {% endfor %}
      <div class="row">
        <label class="grow">BCC address <input name="address" value="{{ bcc_form.address }}" placeholder="you+crm@gmail.com"></label>
        <label class="grow">IMAP server <input name="imap_host" id="bcc-imap-host" value="{{ bcc_form.imap_host }}" placeholder="imap.gmail.com"></label>
      </div>
      <label>App password <input type="password" name="password" value="" autocomplete="new-password" placeholder="{{ 'stored; leave empty to keep it' if state.bcc else '' }}"></label>
      {% if os_store %}<label class="check"><input type="checkbox" name="keychain" value="1" checked> Store the password in {{ os_store_label }}</label>{% endif %}
      <p class="small">{% if os_store %}Stored in <code>.secrets.toml</code> (mode 600) or {{ os_store_label }}, never in <code>config.toml</code>.{% if os_store == 'secret-service' %} A keyring is locked while you are logged out, so an import that runs then cannot read the password: keep it in <code>.secrets.toml</code> if the machine imports without you.{% endif %}{% elif is_windows %}Stored in <code>.secrets.toml</code>, never in <code>config.toml</code>: plain text, readable only by your user account, never committed to git.{% else %}Stored in <code>.secrets.toml</code> (mode 600), never in <code>config.toml</code>: plain text, readable only by your user account, never committed to git. No system keyring was found
        {%- call m.hint('keyring-help', 'How to use a system keyring') %} Install <code>libsecret-tools</code> and run a Secret Service such as GNOME Keyring or KWallet to use one.{% endcall %}.{% endif %}</p>
      <button type="submit">Save</button>
    </form>
    {% if gmail_filter %}
    <h3>Gmail filter</h3>
    <p class="small">Keeps these copies out of your inbox. In Gmail: Settings → Filters → Create new filter.</p>
    <pre class="copy"><code>{{ gmail_filter }}</code></pre>
    {% endif %}
  </details>
</section>

<section class="setup-step" id="send">
  <div class="setting-head"><h2>Sending</h2>{{ status(send_form.enabled, 'on', 'off') }}{{ how('/help/sending') }}</div>
  <p class="summary">Send approved outreach from the Outreach page, now or spaced over the working day, from a mailbox of its own.
    {%- call m.hint('send-help', 'What goes out') %} You still approve every message. Mail is plain text only: no links, no tracking pixel.{% endcall %}</p>
  <p class="meta">Use a separate mailbox, ideally on its own domain: cold email can hurt the reputation of the domain it is sent from. 50 a day is the plan; a new mailbox starts at 10 and steps up over the ramp below.</p>
  {% for problem in send_problems %}<p class="warning-box">Config: {{ problem }}</p>{% endfor %}
  {% if send_cap_note %}<p class="warning-box">{{ send_cap_note }}</p>{% endif %}
  {% if send_form.enabled %}
  <p class="meta">{{ send_status.line }}</p>
  {% if send_status.missing %}<p class="error">Not ready: {{ send_status.missing }}</p>{% endif %}
  <p class="meta">Scheduled sending: {% if send_job.send_installed %}<strong>on</strong>, the queue is checked every few minutes while this computer is awake.{% elif send_job.send_elsewhere %}the job on this computer belongs to {{ send_job.send_elsewhere }}.{% else %}<strong>off</strong>: approved email waits in the queue until you turn it on.{% endif %}</p>
  {% endif %}
  <div class="actions">
    {% if send_form.enabled %}
    <form method="post" action="/settings/send/test" class="inline">
      <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
      <button type="submit" data-busy="Sending&hellip;">Send a test to myself</button>
    </form>
    <form method="post" action="/settings/send/job" class="inline">
      <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
      {% if send_job.send_installed %}<button type="submit" name="action" value="off" class="secondary">Turn off scheduled sending</button>
      {% else %}<button type="submit" name="action" value="on">Turn on scheduled sending</button>{% endif %}
    </form>
    {% endif %}
  </div>
  {{ step_errors('send') }}
  <details class="edit"{% if not send_form.enabled or 'send' in form_errors %} open{% endif %}>
    <summary>{{ 'Change the sending settings' if send_form.enabled else 'Set up sending' }}</summary>
    <form method="post" action="/settings/send" class="record-form" id="send-form">
      <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
      <label class="check"><input type="checkbox" name="enabled" value="1"{% if send_form.enabled %} checked{% endif %}> Sending is on (Send now and Schedule appear on the Outreach page)</label>
      <label>Mail provider
        <select id="send-provider" aria-describedby="send-provider-note">
          <option value="">other (type the servers yourself)</option>
          {% for key, p in send_providers.items() %}<option value="{{ key }}" data-smtp="{{ p.smtp_host }}" data-port="{{ p.smtp_port }}" data-imap="{{ p.imap_host }}"{% if send_form.smtp_host == p.smtp_host %} selected{% endif %}>{{ p.label }}</option>{% endfor %}
        </select>
      </label>
      {% for key, p in send_providers.items() %}
      <p class="small provider-note{% if not p.works %} warning{% endif %}" data-send-provider="{{ key }}" id="{{ 'send-provider-note' if loop.first else '' }}"{% if send_form.smtp_host != p.smtp_host %} hidden{% endif %}>
        <strong>{{ p.label }}:</strong> {{ p.note }}{% if p.password_url %} <a href="{{ p.password_url }}" target="_blank" rel="noopener">Create the app password</a>.{% endif %}
      </p>
      {% endfor %}
      <div class="row">
        <label class="grow">Send from <input name="from_addr" value="{{ send_form.from_addr }}" placeholder="cold@mail.example.com" autocomplete="off"></label>
        <label class="grow">Login (if not the same address) <input name="smtp_user" value="{{ send_form.smtp_user }}" autocomplete="off"></label>
      </div>
      <label>App password <input type="password" name="password" value="" autocomplete="new-password" placeholder="{{ 'stored; leave empty to keep it' if send_password_stored else 'paste the 16-character app password' }}"></label>
      {% if os_store %}<label class="check"><input type="checkbox" name="keychain" value="1" checked> Store the password in {{ os_store_label }}</label>{% endif %}
      <p class="small">Stored in {% if os_store %}<code>.secrets.toml</code> (mode 600) or {{ os_store_label }}{% else %}<code>.secrets.toml</code> (mode 600){% endif %}, never in <code>config.toml</code>. One app password covers sending and the reply check (IMAP). {% if os_store == 'secret-service' %}A keyring is locked while you are logged out, so scheduled sending then cannot read it: keep it in <code>.secrets.toml</code> if the machine sends without you.{% endif %}</p>
      <div class="row">
        <label class="grow">SMTP server <input name="smtp_host" id="send-smtp-host" value="{{ send_form.smtp_host }}"></label>
        <label>Port <input name="smtp_port" id="send-smtp-port" value="{{ send_form.smtp_port }}" size="5" inputmode="numeric"></label>
        <label class="grow">IMAP server (reply check, Sent check, bounces) <input name="imap_host" id="send-imap-host" value="{{ send_form.imap_host }}"></label>
      </div>
      <h3>When and how much</h3>
      <div class="row">
        <label title="Mail goes out only inside this window, on the days ticked, in your local time">Window <input name="window" value="{{ send_form.window }}" size="11" placeholder="08:30-17:30"></label>
        <label>Most per day <input name="daily_cap" value="{{ send_form.daily_cap }}" size="5" inputmode="numeric"></label>
        <label class="grow">Ramp, per week from the first send <input name="ramp" value="{{ send_form.ramp }}" placeholder="10, 20, 30, 40"></label>
      </div>
      <fieldset class="send-days"><legend>Days</legend>
        {% for d in send_weekdays %}<label class="check inline-check"><input type="checkbox" name="days" value="{{ d }}"{% if d in send_form.days %} checked{% endif %}> {{ d }}</label> {% endfor %}
      </fieldset>
      <div class="row">
        <label>Least minutes between two mails <input name="min_gap" value="{{ send_form.min_gap }}" size="4" inputmode="numeric"></label>
        <label>Least hours between two mails to one company <input name="company_gap_hours" value="{{ send_form.company_gap_hours }}" size="4" inputmode="numeric"></label>
        <label class="grow">Never email these countries (e.g. DE, AT; empty = none) <input name="countries" value="{{ send_form.countries }}" placeholder="none"></label>
      </div>
      <p class="small">More than 150 a day for more than 1-2 days in a row is strongly discouraged: after two such days the third is held at 150. German and Austrian law ask for consent to advertising email, B2B included; that is yours to judge (not legal advice), so a country can be switched off above.</p>
      <button type="submit">Save</button>
    </form>
  </details>
</section>

<section class="setup-step" id="calendar">
  <div class="setting-head"><h2>Calendar</h2>{% if state.calendar %}{{ status(true) }}{% endif %}{{ how('/help/calendar') }}</div>
  <p class="summary">{% if not state.calendar %}Optional. {% endif %}Logs past meetings with people at your companies.</p>
  <div class="bcc-status">
    {% if calendar_last_run %}
      {% if calendar_last_run.ok %}
        <p class="meta">Last meeting import {{ ui_datetime(calendar_last_run.at) }}: {{ calendar_last_run.summary }}</p>
      {% else %}
        <p class="error">Last meeting import {{ ui_datetime(calendar_last_run.at) }} failed: {{ calendar_last_run.error }}</p>
      {% endif %}
    {% else %}
      <p class="meta">No meeting import has run yet. Meetings that match no company wait on <a href="/#to-file">Home, under To file</a>.</p>
    {% endif %}
  </div>
  <div class="actions">
    <form method="post" action="/calendar/import" class="inline"><input type="hidden" name="back" value="/settings"><button type="submit">Import meetings now</button></form>
  </div>
  {{ step_errors('calendar') }}
  <details class="edit"{% if 'calendar' in form_errors or (calendar_last_run and not calendar_last_run.ok) %} open{% endif %}>
    <summary>{{ 'Change calendar address' if state.calendar else 'Add your calendar' }}</summary>
    <form method="post" action="/settings/calendar" class="record-form">
      <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
      <label>Secret ICS address <input type="password" name="url" value="" autocomplete="off" placeholder="{{ 'stored; leave empty to keep it' if state.calendar else '' }}"></label>
      <p class="small">Google: Settings → your calendar → Integrate calendar → Secret address in iCal format. Treat it like a password.</p>
      <button type="submit">Save and test (dry run)</button>
    </form>
  </details>
</section>
</div>

{# ================================================================ Your CRM #}
{{ group_start('crm') }}
<section class="setup-step" id="playbook">
  <div class="setting-head"><h2>Playbook</h2>{{ status(playbook_status.ready, 'ready', 'not ready') }}{{ how('/help/playbook') }}</div>
  <p class="summary">What you sell, to whom, and how you write (<code>MESSAGING.md</code>), one part per approach.
  {%- if playbook_status.problem %} {{ playbook_status.problem }}.
  {%- elif playbook_status.ready %} Ready for the outreach bot: {{ playbook_status.ready | join(', ') }}.
  {%- else %} No approach is ready for the outreach bot yet.{% endif %}
  {%- set waiting = playbook_status.approaches | reject('in', playbook_status.ready) | list %}
  {%- if waiting and playbook_status.ready %} Not ready yet: {{ waiting | join(', ') }}.{% endif %}</p>
  <p><a class="button" href="/settings/playbook">Open the playbook</a></p>
  <form method="post" action="/settings/learning" class="record-form" id="learning-setting">
    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
    <p class="summary">Learning from your edits (<a href="/learning">Learning page</a>): who reads the evidence and proposes lessons.</p>
    <div class="row">
      <label>Distil lessons
        <select name="learning_distill">
          <option value="hermit"{% if learning_form.distill == 'hermit' %} selected{% endif %}>hermit: Hermit asks your AI CLI (one strong-model call)</option>
          <option value="handoff"{% if learning_form.distill == 'handoff' %} selected{% endif %}>handoff: write an evidence pack for your own agent</option>
        </select>
      </label>
    </div>
    <div class="row">
      <label>Examples in drafts
        <select name="learning_exemplars">
          <option value="off"{% if learning_form.exemplars == 'off' %} selected{% endif %}>off: the draft prompt stays as it is</option>
          <option value="corrections"{% if learning_form.exemplars == 'corrections' %} selected{% endif %}>corrections: show how you changed similar drafts</option>
          <option value="outcomes"{% if learning_form.exemplars == 'outcomes' %} selected{% endif %}>outcomes: show similar messages that got a positive reply, a deal or a win</option>
          <option value="both"{% if learning_form.exemplars == 'both' %} selected{% endif %}>both (adds roughly 300 to 500 tokens to each first-touch draft)</option>
        </select>
      </label>
      <button type="submit">Save</button>
    </div>
  </form>
</section>

<section class="setup-step" id="fields">
  <div class="setting-head"><h2>Fields</h2>{{ how('/help/settings#fields') }}{{ describe('fields') }}</div>
  <p class="summary">Fields of your own, on top of the built-in ones, described in <code>fields.toml</code>.
    {%- call m.hint('fields-values-help', 'Where the values live') %} Their values live in your records' front matter.{% endcall %}</p>
  {{ step_errors('fields') }}
  {% if custom_field_defs %}
  <div class="table-scroll"><table class="fields-list small">
    <tr><th>key</th><th>label</th><th>type</th><th>on</th><th>shown in</th></tr>
    {% for f in custom_field_defs %}
    <tr>
      <td><code>{{ f.key }}</code></td><td>{{ f.label }}</td><td>{{ f.type }}</td>
      <td>{{ f.applies_to }}</td><td>{{ f.show_in | join(', ') }}</td>
    </tr>
    {% endfor %}
  </table></div>
  {% else %}
  <p class="meta">No fields of your own yet.</p>
  {% endif %}

  <details class="edit"{% if not custom_field_defs or 'fields' in form_errors %} open{% endif %}>
    <summary>Add a field</summary>
    <form method="post" action="/settings/fields/add" class="record-form">
      <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
      <div class="row">
        <label>key <input name="key" placeholder="segment" required></label>
        <label class="grow">label (empty: the key) <input name="label"></label>
        <label>type
          <select name="type">{% for t in field_types %}<option value="{{ t }}">{{ t }}</option>{% endfor %}</select>
        </label>
        <label>on
          <select name="applies_to" id="field-applies-to">{% for sc in field_scopes %}<option value="{{ sc }}">{{ sc }}</option>{% endfor %}</select>
        </label>
      </div>
      <div class="row">
        <label class="grow">options, comma separated (select only) <input name="options" placeholder="smb, mid-market, enterprise"></label>
        <label class="grow">help text under the input <input name="help"></label>
      </div>
      <fieldset class="switch across" id="field-show-in">
        <legend>Shown in</legend>
        {% for view in ['detail', 'board', 'companies', 'contacts', 'messages'] %}
        <label data-scopes="{% for sc in field_scopes if view in field_views[sc] %}{{ sc }} {% endfor %}"><input type="checkbox" name="show_in" value="{{ view }}"{% if view == 'detail' %} checked{% endif %}> {{ view }}</label>
        {% endfor %}
      </fieldset>
      <label class="check"><input type="checkbox" name="messaging" value="on" checked> Outreach templates may use it as <code>{key}</code></label>
      <button type="submit">Add field</button>
    </form>
  </details>
  <details class="edit"{% if 'fields' in form_errors %} open{% endif %}>
    <summary>Edit fields.toml directly</summary>
    <form method="post" action="/settings/fields" class="record-form">
      <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
      <label class="grow">fields.toml <textarea name="fields_toml" rows="12" spellcheck="false">{{ fields_form.toml }}</textarea></label>
      <p class="small">Removing a field only hides it: the values stay in your records and return with the field.</p>
      <button type="submit">Save fields</button>
    </form>
  </details>
</section>

<section class="setup-step" id="messaging">
  <div class="setting-head"><h2>Drafts</h2>{{ how('/help/messages') }}{{ describe('messaging') }}</div>
  <p class="summary">Which fields fill the team-size sentences in outreach drafts; with neither set, those sentences leave a line for you to fill in.
    {%- call m.hint('draft-fields-help', 'Using your own fields in drafts') %} Any field of your own can also be used in a draft as <code>{{ '{' }}key{{ '}' }}</code>.{% endcall %}</p>
  {{ step_errors('messaging') }}
  <form method="post" action="/settings/messaging" class="record-form">
    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
    <div class="row">
      <label>Headcount field
        <select name="size_field">
          <option value="">none</option>
          {% for k in company_field_keys %}<option value="{{ k }}"{% if messaging_form.size_field == k %} selected{% endif %}>{{ k }}</option>{% endfor %}
        </select>
      </label>
      <label>Sales-team-size field
        <select name="team_field">
          <option value="">none</option>
          {% for k in company_field_keys %}<option value="{{ k }}"{% if messaging_form.team_field == k %} selected{% endif %}>{{ k }}</option>{% endfor %}
        </select>
      </label>
      <button type="submit">Save</button>
    </div>
  </form>
</section>

<section class="setup-step" id="task-types">
  <div class="setting-head"><h2>Task types</h2>{{ describe('task-types') }}</div>
  <p class="summary">Your own labels for tasks and next steps, used as filters.
    {%- call m.hint('task-types-help', 'What renaming and deleting do') %} Renaming a type renames it on every task; deleting one leaves it on its tasks, in grey.{% endcall %}</p>
  {{ step_errors('task-types') }}
  <form method="post" action="/settings/task-types" class="record-form">
    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
    <table class="task-types">
      {% for t in task_types_form.rows %}
      <tr>
        <td><input name="name" value="{{ t.name }}" maxlength="40" aria-label="type name"><input type="hidden" name="old" value="{{ t.name }}"></td>
        <td><select name="colour" aria-label="colour">{% for p in palette %}<option value="{{ p }}"{% if p == t.colour %} selected{% endif %}>{{ p }}</option>{% endfor %}</select></td>
        <td>{{ m.type_chip(t.name) }}</td>
        <td class="actions">
          {% if not loop.first %}<button type="submit" name="move" value="{{ loop.index0 }}-up" title="Move up">Up</button>{% endif %}
          {% if not loop.last %}<button type="submit" name="move" value="{{ loop.index0 }}-down" title="Move down">Down</button>{% endif %}
          <button type="submit" name="delete" value="{{ loop.index0 }}" title="Remove this type; its tasks keep it, in grey">Delete</button>
        </td>
      </tr>
      {% endfor %}
      <tr>
        <td><input name="name" value="" maxlength="40" placeholder="new type" aria-label="new type name"><input type="hidden" name="old" value=""></td>
        <td><select name="colour" aria-label="colour">{% for p in palette %}<option value="{{ p }}">{{ p }}</option>{% endfor %}</select></td>
        <td></td><td></td>
      </tr>
    </table>
    <button type="submit">Save task types</button>
  </form>
</section>

<section class="setup-step" id="stages">
  <div class="setting-head"><h2>Deal stages</h2>{{ how('/help/settings#deal-stages') }}</div>
  <p class="summary">The steps a deal goes through, in order: the Pipeline columns, the filters and the funnel follow this list.
    {%- call m.hint('stage-roles-help', 'What each role means') %} Each stage has a role that tells Hermit what it means. <b>open</b> is a column on the board (the first one is where new companies start and where a requalified one returns). <b>won</b> and <b>lost</b> end a deal (lost needs a reason). <b>closed</b> is any other end, such as disqualified. <b>parked</b> is out of the pipeline for now, with a date to come back.{% endcall %}</p>
  {{ step_errors('stages') }}
  <form method="post" action="/settings/stages" class="record-form">
    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
    {#- Enter in a name box submits the form's first button: make that Save, not a row's Delete. -#}
    <button type="submit" class="default-submit" tabindex="-1" aria-hidden="true">Save stages</button>
    {% if stages_form.confirm %}
    {% set ask = stages_form.confirm %}
    <div class="warning-box stage-move">
      <strong>{{ ask.count }} {{ 'company is' if ask.count == 1 else 'companies are' }} still in {{ ask.names | join(', ') }}.</strong>
      Move {{ 'it' if ask.count == 1 else 'them' }} to
      <select name="move_to" aria-label="move companies to">{% for t in ask.targets %}<option value="{{ t }}"{% if t == ask.move_to %} selected{% endif %}>{{ t }}</option>{% endfor %}</select>
      <input name="move_reason" placeholder="reason (needed for a lost stage)" aria-label="reason for the move">
      <input type="hidden" name="delete" value="{{ ask.index }}">
      <button type="submit">Move and delete</button>
    </div>
    {% endif %}
    <div class="table-scroll"><table class="stages-table">
      <tr><th>stage</th><th title="What the stage means to Hermit: open, won, lost, closed or parked">role</th><th title="Show the monthly value in the PIPELINE.md heading">valued</th><th>companies</th><th></th></tr>
      {% for r in stages_form.rows %}
      <tr>
        <td><input name="name" value="{{ r.name }}" maxlength="30" aria-label="stage name" title="Renaming a stage renames it on every company and in its history"><input type="hidden" name="old" value="{{ r.old }}"></td>
        <td><select name="role" aria-label="role">{% for x in stages_form.roles %}<option value="{{ x }}"{% if x == r.role %} selected{% endif %}>{{ x }}</option>{% endfor %}</select></td>
        <td><input type="checkbox" name="valued" value="{{ loop.index0 }}"{% if r.valued %} checked{% endif %} aria-label="show value"></td>
        <td class="num">{{ r.count }}</td>
        <td class="actions">
          {% if not loop.first %}<button type="submit" name="move" value="{{ loop.index0 }}-up" title="Move up">Up</button>{% endif %}
          {% if not loop.last %}<button type="submit" name="move" value="{{ loop.index0 }}-down" title="Move down">Down</button>{% endif %}
          <button type="submit" name="delete" value="{{ loop.index0 }}" title="Remove this stage; if companies are in it, you choose where they go">Delete</button>
        </td>
      </tr>
      {% endfor %}
      <tr>
        <td><input name="name" value="" maxlength="30" placeholder="new stage" aria-label="new stage name"><input type="hidden" name="old" value=""></td>
        <td><select name="role" aria-label="role">{% for x in stages_form.roles %}<option value="{{ x }}">{{ x }}</option>{% endfor %}</select></td>
        <td><input type="checkbox" name="valued" value="{{ stages_form.rows | length }}" aria-label="show value"></td>
        <td></td><td></td>
      </tr>
    </table></div>
    <button type="submit">Save stages</button>
  </form>
</section>

<section class="setup-step" id="outcomes">
  <div class="setting-head"><h2>Outcomes</h2>{{ how('/help/settings#outcomes') }}{{ describe('outcomes') }}</div>
  <p class="summary">One per line, in order: a detected reply counts as the <strong>first</strong>, silence past the message window as the <strong>last</strong>.</p>
  {{ step_errors('outcomes') }}
  {% if outcomes_offer %}
  <form method="post" action="/settings/outcomes" class="inline outcomes-offer">
    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
    <input type="hidden" name="outcomes" value="{{ outcomes_offer | join('\n') }}">
    <input type="hidden" name="message_window_days" value="{{ outcomes_form.message_window_days }}">
    <input type="hidden" name="silent_days" value="{{ outcomes_form.silent_days }}">
    <p class="small">New: an <strong>interested</strong> outcome, for a reply that shows interest. It goes in the middle, so replies and silence count as before: {{ outcomes_offer | join(', ') }}.
      {%- call m.hint('interested-help', 'What the interested outcome does') %} Set it when you log such a reply and the Outreach page lists it under Replies to interest, no AI needed.{% endcall %}
      <button type="submit" class="secondary">Add interested</button></p>
  </form>
  {% endif %}
  <form method="post" action="/settings/outcomes" class="record-form">
    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
    <div class="row">
      <label class="grow">Outcomes (one per line) <textarea name="outcomes" rows="4">{{ outcomes_form.outcomes }}</textarea></label>
      <label>Message window (days) <input name="message_window_days" value="{{ outcomes_form.message_window_days }}" inputmode="numeric" size="6"></label>
      <label>Silent after (days) <input name="silent_days" value="{{ outcomes_form.silent_days }}" inputmode="numeric" size="6"></label>
    </div>
    <button type="submit">Save</button>
  </form>
</section>
</div>

{# ==================================================== Data (backup, export) #}
{{ group_start('backup') }}
<section class="setup-step" id="backup">
  <div class="setting-head"><h2>Backup</h2>{{ status(state.backup) }}<a class="how" href="/help/backups">How to roll back</a></div>
  {{ step_errors('backup') }}
  <h3>On this computer</h3>
  <p class="{{ 'warning' if lb.level != 'ok' else 'summary' }} local-backup-summary">
    {%- if lb.level == 'ok' and lb.age_minutes is not none -%}
      Last backup {{ 'just now' if lb.age_minutes < 1 else lb.age_minutes ~ ' min ago' }} ({{ lb.size }}).
    {%- elif not lb.last_ok -%}
      No backup yet.
    {%- else -%}
      {{ lb.summary }}
    {%- endif -%}
    {% if lb.last_ok and not schedule.backup_installed %} It does not repeat on its own yet.{% endif %}
  </p>
  <p class="meta">Every few minutes, to a repository outside this folder that can only grow, so any version can be put back.</p>
  {% if schedule.backup_elsewhere %}
  <p class="warning">This computer's backup job is set up for another folder, <code>{{ schedule.backup_elsewhere }}</code> (there is one per computer). To back up this folder instead, run <code>hermitcrm --data {{ about.data_dir }} schedule install</code>; the other folder is then no longer backed up.</p>
  {% elif not schedule.backup_installed or not lb.last_ok %}
  <form method="post" action="/settings/backup/local" class="record-form">
    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
    <button type="submit">Start local backups</button>
    <span class="small">Makes a first backup now, then one every 5 minutes in the background.</span>
  </form>
  {% endif %}
  <details class="edit">
    <summary>Where it is kept</summary>
    <p class="small">In <code>{{ lb.dest }}</code>, outside your CRM folder, so deleting the folder keeps the backup. For another disk or a synced folder, set <code>backup_dir</code> in <code>config.toml</code>.</p>
    {% if lb.lines[1:] %}<ul class="schedule-lines small">{% for line in lb.lines[1:] %}<li><code>{{ line }}</code></li>{% endfor %}</ul>{% endif %}
  </details>

  <h3>Online copy (optional){% if state.remote %} {{ status(true) }}{% endif %}</h3>
  {% if remote_url %}
  <p class="summary">Pushed to <code>{{ remote_url }}</code> after every change.</p>
  {% else %}
  <p class="summary">The backup above is on the same disk as your data; push to a git remote after every change for a copy that survives a lost laptop.</p>
  {% endif %}
  {% if remote_warning %}<p class="warning">{{ remote_warning }}</p>
  {% else %}<p class="warning"><strong>The repository must be PRIVATE</strong> on GitHub, GitLab or Bitbucket: it holds your contacts and mail.</p>{% endif %}
  <details class="edit"{% if not remote_url or 'backup' in form_errors %} open{% endif %}>
    <summary>{{ 'Change the repository' if remote_url else 'Set up an online copy' }}</summary>
    <form method="post" action="/settings/backup" class="record-form">
      <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
      <label>Git remote URL <input name="url" value="{{ remote_url }}" placeholder="git@github.com:you/crm.git"></label>
      <button type="submit">Save and test push</button>
    </form>
  </details>
</section>

<section class="setup-step" id="export">
  <div class="setting-head"><h2>Export everything</h2>{{ how('/help/import#export') }}</div>
  <p class="summary">Your companies, contacts, interactions, tasks and stage history as a zip of CSV files, for a spreadsheet or another CRM.</p>
  <form method="get" action="/export.zip" class="record-form">
    <div class="row">
      <label>Column names
        <select name="profile">
          <option value="generic">Hermit CRM</option>
          <option value="hubspot">HubSpot</option>
          <option value="pipedrive">Pipedrive</option>
        </select>
      </label>
      <label><input type="checkbox" name="excel" value="true"> For Excel</label>
    </div>
    <button type="submit" title="Exporting changes nothing in your CRM">Export everything</button>
  </form>
  <p class="meta">Also from a terminal: <code>hermitcrm --data {{ about.data_dir }} export</code> (add <code>--format json</code> for one JSON file).</p>
</section>
</div>

{# ================================================================ Advanced #}
{{ group_start('advanced') }}
<p class="small">Set up from a terminal; this tab shows what is running and the commands to copy.</p>
<section class="setup-step" id="schedule">
  <div class="setting-head"><h2>Schedule</h2>{{ status(schedule.installed) }}{{ how('/help/settings#schedule') }}</div>
  <p class="summary">A daily job runs <code>hermitcrm sync --apply</code>: the BCC import, then the calendar import.</p>
  <details class="edit"{% if not schedule.installed %} open{% endif %}>
    <summary>What is installed, and the install command</summary>
    <ul class="schedule-lines small">
      {% for line in schedule.lines %}<li><code>{{ line }}</code></li>{% endfor %}
    </ul>
    <p class="small">Daily at 07:00; <code>--at HH:MM</code> changes the time, and without <code>--serve</code> the web app is left to you.</p>
    <pre class="copy"><code>{{ schedule.install_command }}</code></pre>
  </details>
</section>

<section class="setup-step" id="access">
  <div class="setting-head"><h2>Access from your phone</h2>{% if access.on_network %}{{ status(true, 'on') }}{% endif %}{{ how('/help/settings#access') }}</div>
  {% set no_password %}<p class="warning">Hermit CRM has no password: anyone who can reach that port can read and write your CRM. Use a network you trust or a private one (Tailscale, WireGuard), not public Wi-Fi.</p>{% endset %}
  {% if access.on_network %}
  <p class="summary">The app answers on your network: open <code>{{ access.lan_url }}</code> on a phone on the same Wi-Fi.</p>
  {{ no_password }}
  {% else %}
  <p class="summary">The app is bound to <code>{{ access.host }}</code>, which only this machine can reach.</p>
  <details class="edit">
    <summary>How to turn it on</summary>
    <pre class="copy"><code>{{ access.serve_command }}</code></pre>
    <p class="small">Then open <code>{{ access.lan_url }}</code> on the phone. To make it permanent, set <code>host = "0.0.0.0"</code> in <code>config.toml</code>.</p>
    {{ no_password }}
  </details>
  {% endif %}
</section>

<section class="setup-step" id="mcp">
  <div class="setting-head"><h2>Access from an AI app (MCP)</h2>{{ how('/help/ai-agents') }}</div>
  <p class="summary">Lets Claude Desktop, ChatGPT desktop or Cursor on this computer read and write this CRM.
    {%- call m.hint('mcp-help', 'What an AI app can do here') %} It can show your pipeline and the replies you owe, brief you before a meeting and log the call afterwards, and make Hermit yours (fields, dashboards, routines, the look), each change one commit you can undo.{% endcall %}</p>
  <details class="edit">
    <summary>The config to paste</summary>
    <p class="small">Paste this into your AI app's MCP config; it starts the server itself, over stdin and stdout, so the app must run on this computer.</p>
    <pre class="copy"><code>{{ access.mcp_config }}</code></pre>
    <p class="small">The command on its own: <code>{{ access.mcp_command }}</code></p>
  </details>
</section>

<section class="setup-step" id="doctor">
  <div class="setting-head"><h2>Check the installation</h2></div>
  <pre class="copy"><code>hermitcrm --data {{ about.data_dir }} doctor</code></pre>
  <p class="small">Add <code>--online</code> to try the IMAP login as well.</p>
</section>
</div>

<script>
// One tab at a time, picked by the address: #tab-mail opens a tab, and a
// section id (#bcc, where every save and the red "!" in the nav land) opens
// the tab that holds it. A page re-shown with a form error opens that tab.
// Without this script every tab shows, one after the other.
(function () {
  var nav = document.querySelector(".settings-tabs");
  if (!nav) return;
  var groups = [].slice.call(document.querySelectorAll(".settings-group"));
  var tabs = [].slice.call(nav.querySelectorAll("a[data-group]"));
  function show(group) {
    groups.forEach(function (g) { g.hidden = g !== group; });
    tabs.forEach(function (t) {
      if (t.dataset.group === group.id) t.setAttribute("aria-current", "page");
      else t.removeAttribute("aria-current");
    });
  }
  // The browser's own jump to #section comes after this script has picked the
  // tab, and the sections' scroll-margin keeps the tabs and "Saved" in view.
  function fromAddress(event) {
    var target = location.hash && document.getElementById(decodeURIComponent(location.hash.slice(1)));
    var group = target && (target.classList.contains("settings-group") ? target : target.closest(".settings-group"));
    if (group) {
      show(group);
      if (event) target.scrollIntoView();   // a hash change jumped before the tab switched
      return;
    }
    var flagged = document.querySelector(".settings-group[data-error]");
    show(flagged || groups[0]);
    if (flagged) flagged.querySelector(".errors").closest("[id]").scrollIntoView();
  }
  window.addEventListener("hashchange", fromAddress);
  fromAddress();
})();
// Picking a provider fills the server and shows how to get its app password.
// Plain progressive enhancement: without this, the server box is typed by hand.
(function () {
  var select = document.getElementById("bcc-provider");
  var host = document.getElementById("bcc-imap-host");
  if (!select || !host) return;
  select.addEventListener("change", function () {
    var chosen = select.options[select.selectedIndex];
    if (chosen.dataset.host) host.value = chosen.dataset.host;
    document.querySelectorAll(".provider-note").forEach(function (n) {
      n.hidden = n.dataset.provider !== select.value;
    });
  });
})();
// Picking a sending provider fills the SMTP and IMAP servers and shows its note.
(function () {
  var select = document.getElementById("send-provider");
  if (!select) return;
  select.addEventListener("change", function () {
    var chosen = select.options[select.selectedIndex];
    [["send-smtp-host", "smtp"], ["send-smtp-port", "port"], ["send-imap-host", "imap"]].forEach(function (pair) {
      var input = document.getElementById(pair[0]);
      if (input && chosen.dataset[pair[1]]) input.value = chosen.dataset[pair[1]];
    });
    document.querySelectorAll("[data-send-provider]").forEach(function (n) {
      n.hidden = n.dataset.sendProvider !== select.value;
    });
  });
})();
// "Shown in" offers only the places a field of the chosen record can appear;
// without this script all five show and the server names a wrong one.
(function () {
  var scope = document.getElementById("field-applies-to");
  var places = document.getElementById("field-show-in");
  if (!scope || !places) return;
  function offer() {
    places.querySelectorAll("label[data-scopes]").forEach(function (label) {
      var fits = label.dataset.scopes.split(" ").indexOf(scope.value) !== -1;
      label.hidden = !fits;
      if (!fits) label.querySelector("input").checked = false;
    });
  }
  scope.addEventListener("change", offer);
  offer();
})();
</script>
{% endblock %}