{#
  _email_form.html — reusable email account form fields
  Expects context variable `acct` (dict with existing values, or empty dict for add).
  The enclosing <form> must supply action and method.
  The form does NOT include a name field when editing (hidden input in parent).
#}

{% set _presets_json %}{"gmail":{"imap_host":"imap.gmail.com","smtp_host":"smtp.gmail.com","smtp_port":587,"auth":"basic"},"outlook":{"imap_host":"outlook.office365.com","smtp_host":"smtp.office365.com","smtp_port":587,"auth":"oauth","oauth_authority":"https://login.microsoftonline.com/common"},"custom":{"imap_host":"","smtp_host":"","smtp_port":587,"auth":"basic"}}{% endset %}

<div class="filter-group">
  <label for="email-provider-preset">Provider preset</label>
  <select id="email-provider-preset" onchange="applyEmailPreset(this.value)">
    <option value="">— choose preset —</option>
    <option value="gmail">Gmail</option>
    <option value="outlook">Outlook / Microsoft 365</option>
    <option value="custom">Custom</option>
  </select>
</div>

{% if not acct.get("name") %}
<div class="filter-group">
  <label for="email-name">Account name
    <span class="field-help">Slug identifier — letters, digits, hyphens, underscores.</span>
  </label>
  <input type="text" id="email-name" name="name"
         value="{{ acct.get('name', '') }}"
         placeholder="e.g. work or personal" required
         style="width:100%;font-family:inherit">
</div>
{% endif %}

<div class="filter-group">
  <label for="email-username">Username / email address</label>
  <input type="email" id="email-username" name="username"
         value="{{ acct.get('username', '') }}"
         placeholder="you@example.com"
         style="width:100%;font-family:inherit">
</div>

<div class="filter-group">
  <label for="email-app-password">App password
    <span class="field-help">Leave blank to keep existing password.</span>
  </label>
  <input type="password" id="email-app-password" name="app_password"
         value=""
         autocomplete="new-password"
         style="width:100%;font-family:inherit">
</div>

<div class="filter-group">
  <label for="email-imap-host">IMAP host</label>
  <input type="text" id="email-imap-host" name="imap_host"
         value="{{ acct.get('imap_host', '') }}"
         placeholder="imap.example.com"
         style="width:100%;font-family:monospace;font-size:0.9rem">
</div>

<div class="filter-group">
  <label for="email-smtp-host">SMTP host</label>
  <input type="text" id="email-smtp-host" name="smtp_host"
         value="{{ acct.get('smtp_host', '') }}"
         placeholder="smtp.example.com"
         style="width:100%;font-family:monospace;font-size:0.9rem">
</div>

<div class="filter-group">
  <label for="email-smtp-port">SMTP port</label>
  <input type="number" id="email-smtp-port" name="smtp_port"
         value="{{ acct.get('smtp_port', 587) }}"
         min="1" max="65535" style="width:8rem">
</div>

<div class="filter-group">
  <label for="email-folder">Folder</label>
  <input type="text" id="email-folder" name="folder"
         value="{{ acct.get('folder', 'INBOX') }}"
         style="width:100%;font-family:inherit">
</div>

<div class="filter-group">
  <label for="email-auth">Authentication</label>
  <select id="email-auth" name="auth" onchange="toggleOauthFields(this.value)">
    <option value="basic" {% if acct.get('auth', 'basic') == 'basic' %}selected{% endif %}>
      Basic (username + password)
    </option>
    <option value="oauth" {% if acct.get('auth') == 'oauth' %}selected{% endif %}>
      OAuth (Microsoft device code)
    </option>
  </select>
</div>

<div id="oauth-fields" style="display:{% if acct.get('auth') == 'oauth' %}grid{% else %}none{% endif %};gap:0.6rem">
  <div class="filter-group">
    <label for="email-oauth-client-id">OAuth client ID
      <span class="field-help">Leave blank to use the default Thunderbird public client.</span>
    </label>
    <input type="text" id="email-oauth-client-id" name="oauth_client_id"
           value="{{ acct.get('oauth_client_id', '') }}"
           style="width:100%;font-family:monospace;font-size:0.85rem">
  </div>
  <div class="filter-group">
    <label for="email-oauth-authority">OAuth authority URL</label>
    <input type="text" id="email-oauth-authority" name="oauth_authority"
           value="{{ acct.get('oauth_authority', '') }}"
           placeholder="https://login.microsoftonline.com/consumers"
           style="width:100%;font-family:monospace;font-size:0.85rem">
  </div>
</div>

<div class="filter-group">
  <label class="checkbox-item">
    <input type="checkbox" name="enabled" value="true"
           {% if acct.get('enabled', True) %}checked{% endif %}>
    Enabled
  </label>
</div>

<script>
(function () {
  var PRESETS = {{ _presets_json }};

  window.applyEmailPreset = function (key) {
    if (!key || !PRESETS[key]) return;
    var p = PRESETS[key];
    var form = document.getElementById('email-provider-preset').closest('form');
    function setVal(name, val) {
      var el = form.querySelector('[name="' + name + '"]');
      if (el) el.value = val;
    }
    setVal('imap_host', p.imap_host || '');
    setVal('smtp_host', p.smtp_host || '');
    setVal('smtp_port', p.smtp_port || 587);
    setVal('auth', p.auth || 'basic');
    if (p.oauth_authority) setVal('oauth_authority', p.oauth_authority);
    toggleOauthFields(p.auth || 'basic');
  };

  window.toggleOauthFields = function (authVal) {
    var block = document.getElementById('oauth-fields');
    if (!block) return;
    block.style.display = (authVal === 'oauth') ? 'grid' : 'none';
  };
})();
</script>