{% extends "base.html" %}
{% block title %}Email Account · {{ role.name }}{% endblock %}
{% block content %}
<div class="page-head">
  <div><a href="{{ url_for('people') }}" class="back">{{ icon("back", 14) }} People</a>
  <h1>{{ role.name }}'s Email Account</h1>
  <p class="muted">{{ role.email }}</p></div>
</div>

{% if provider not in ('local', 'elsewhere') %}
<div class="card">
  <div class="page-head" style="margin:0">
    <div>
      <h2 style="margin:0 0 4px">{{ providers[provider] }}</h2>
      {% if last_error %}<span class="pill review">Problem</span> <span class="small" style="color:var(--err)">{{ last_error }}</span>
      {% elif (provider == 'microsoft' and ms_signed_in) or (provider != 'microsoft' and has_password) %}<span class="pill on">Connected</span>
      {% else %}<span class="pill review">Not connected yet</span>{% endif %}
    </div>
    <div class="actions">
      <form class="inline" method="post" action="{{ url_for('person_email_test', key=key) }}"><button class="btn">Test Connection</button></form>
      <form class="inline" method="post" action="{{ url_for('person_email_disconnect', key=key) }}" data-confirm="Disconnect this email account?"><button class="btn danger">Disconnect</button></form>
    </div>
  </div>
</div>
{% endif %}

<form method="post" class="card" id="email-form">
  <h2>Which email provider is {{ role.email }} with?</h2>
  <div class="choices">
    {% for value, label in providers.items() %}
    <label class="choice"><input type="radio" name="provider" value="{{ value }}" {{ 'checked' if provider == value }}>
      <span>{{ label }}<small>{{ {'local':'Emails stay inside this app. Good for testing.',
        'gmail':'Addresses ending in @gmail.com, or company email run by Google',
        'microsoft':'Outlook, Hotmail, or company email run by Microsoft',
        'imap':'GoDaddy, Zoho, iCloud, your web host, and others',
        'elsewhere':'They run ' ~ product.name ~ ' on their own computer, connected to their own email. Nothing of theirs is connected here.'}[value] }}</small></span></label>
    {% endfor %}
  </div>

  <div class="sub" data-show="provider=gmail">
    <h3>Connect Gmail with an App Password</h3>
    <p class="muted">An app password is a separate 16-letter code that lets {{ product.name }} send and read email for this account. It isn't your normal password, and you can cancel it at any time.</p>
    <ol class="steps">
      <li>Sign in to <b>{{ role.email }}</b> and turn on <a href="https://myaccount.google.com/signinoptions/twosv" target="_blank" rel="noopener">2-Step Verification</a> (Google requires it for app passwords).</li>
      <li>Open <a href="https://myaccount.google.com/apppasswords" target="_blank" rel="noopener">App passwords</a>, type <b>{{ product.name }}</b> as the name, and click <b>Create</b>.</li>
      <li>Copy the 16-letter code Google shows and paste it below.</li>
    </ol>
    <div class="field" style="max-width:360px"><label>App password</label>
      <input type="password" name="password" autocomplete="off" placeholder="{{ 'Saved. Paste a new one to replace it' if has_password and provider == 'gmail' else 'abcd efgh ijkl mnop' }}"></div>
    <button class="btn primary">Save &amp; Test</button>
  </div>

  <div class="sub" data-show="provider=imap">
    <h3>Server Details</h3>
    <p class="muted">Your email provider's help pages list these as "IMAP" and "SMTP" settings.</p>
    <div class="row">
      <div class="field"><label>Incoming (IMAP) server</label><input type="text" name="imap_host" value="{{ mailbox.imap_host or '' }}" placeholder="imap.example.com"></div>
      <div class="field"><label>Port</label><input type="number" name="imap_port" value="{{ mailbox.imap_port or 993 }}"></div>
      <div class="field"><label>Outgoing (SMTP) server</label><input type="text" name="smtp_host" value="{{ mailbox.smtp_host or '' }}" placeholder="smtp.example.com"></div>
      <div class="field"><label>Port</label><input type="number" name="smtp_port" value="{{ mailbox.smtp_port or 465 }}"></div>
    </div>
    <div class="row">
      <div class="field"><label>Username <span class="muted" style="font-weight:400">(usually the email address)</span></label><input type="text" name="username" value="{{ mailbox.username or '' }}" placeholder="{{ role.email }}"></div>
      <div class="field"><label>Password or app password</label><input type="password" name="password" autocomplete="off" placeholder="{{ 'Saved. Paste a new one to replace it' if has_password and provider == 'imap' else '' }}"></div>
    </div>
    <button class="btn primary">Save &amp; Test</button>
  </div>

  <div class="sub" data-show="provider=elsewhere">
    <p class="muted">Emails to {{ role.name }} go to {{ role.email }}. When an automation expects a reply, the reply rules travel with the email, and their copy replies from their own address. Back-and-forth conversations work the same way.</p>
    <button class="btn primary">Save</button>
  </div>
  <div class="sub" data-show="provider=local">
    <button class="btn primary">Use Simulated Email</button>
  </div>
</form>

<div class="card sub-card" data-show-outside="provider=microsoft" id="ms-card">
  <h2>Sign In with Microsoft</h2>
  {% if not ms_ready %}
    <p>Microsoft 365 needs a one-time setup before anyone can sign in. Add the Microsoft app ID under <a href="{{ url_for('settings') }}#microsoft">Settings → Microsoft 365</a>, then come back here.</p>
  {% elif sign_in and sign_in.status == 'waiting' %}
    <p>1. Open <a href="{{ sign_in.url }}" target="_blank" rel="noopener"><b>{{ sign_in.url }}</b></a></p>
    <p>2. Enter this code: <span class="code">{{ sign_in.code }}</span></p>
    <p>3. Sign in as <b>{{ role.email }}</b> and click <b>Accept</b>.</p>
    <p class="muted small">This page updates by itself when you're done. Codes last about 15 minutes.</p>
    <form method="post" action="{{ url_for('person_email_microsoft', key=key) }}"><button class="btn small">Get a New Code</button></form>
    <meta http-equiv="refresh" content="4">
  {% elif sign_in and sign_in.status == 'failed' %}
    <div class="flash error">Sign-in didn't finish: {{ sign_in.error }}</div>
    <form method="post" action="{{ url_for('person_email_microsoft', key=key) }}"><button class="btn primary">Sign In with Microsoft</button></form>
  {% elif ms_signed_in %}
    <p><span class="pill on">Signed in</span>{% if sign_in and sign_in.account %} as {{ sign_in.account }}{% endif %}</p>
    <form method="post" action="{{ url_for('person_email_microsoft', key=key) }}"><button class="btn">Sign In Again</button></form>
  {% else %}
    <p class="muted">You'll sign in on Microsoft's own page and come straight back. {{ product.name }} never sees your password.</p>
    <form method="post" action="{{ url_for('person_email_microsoft', key=key) }}"><button class="btn primary">Sign In with Microsoft</button></form>
    <form method="post" action="{{ url_for('person_email_microsoft', key=key) }}" style="margin-top:8px"><input type="hidden" name="method" value="code">
      <button class="btn small">Use a Code Instead</button></form>
    <p class="hint">If Microsoft says the reply address doesn't match, your IT admin needs to add <code>{{ ms_redirect }}</code> to the app registration under Authentication → Mobile and desktop applications.</p>
  {% endif %}
</div>
{% endblock %}
{% block scripts %}
<script>
const form = document.getElementById('email-form'), msCard = document.getElementById('ms-card');
function refresh() {
  const chosen = form.querySelector('[name=provider]:checked')?.value;
  form.querySelectorAll('[data-show]').forEach(el => el.style.display = el.dataset.show === 'provider=' + chosen ? '' : 'none');
  msCard.style.display = chosen === 'microsoft' ? '' : 'none';
}
form.addEventListener('change', refresh); refresh();
</script>
{% endblock %}