{% extends "base.html" %}
{% from "_hub.html" import hub %}

{% block title %}Email accounts — karyab{% endblock %}

{% block content %}
<h1>Email accounts</h1>

{% if flash %}
{% if flash_error %}
<div class="flash-banner flash-error"
     style="background:#fee2e2;border:1px solid #fca5a5;color:#991b1b;border-radius:6px;
            padding:0.6rem 1rem;margin-bottom:1rem;font-size:0.9rem">
  {{ flash }}
</div>
{% else %}
<div class="flash-banner"
     style="background:var(--badge-hi,#d1fae5);border:1px solid #6ee7b7;color:#065f46;
            border-radius:6px;padding:0.6rem 1rem;margin-bottom:1rem;font-size:0.9rem">
  {{ flash }}
</div>
{% endif %}
{% endif %}

{% call hub(hub_sections) %}

<h2 style="margin:0 0 1rem;font-size:1.1rem">Configured accounts</h2>

{% if accounts %}
  {% for acct in accounts %}
  <div class="email-acct-card">
    <div class="acct-head">
      <span class="acct-name">{{ acct.name }}</span>
      <span class="status-badge status-{{ acct.status }}">{{ acct.status }}</span>
      {% if acct.has_secret %}
      <span class="secret-status configured">credentials ✓</span>
      {% else %}
      <span class="secret-status missing">no credentials</span>
      {% endif %}
      {% if not acct.enabled %}
      <span class="secret-status missing">disabled</span>
      {% endif %}
    </div>

    <div class="email-acct-grid">
      <span><strong>IMAP:</strong> {{ acct.imap_host }}</span>
      <span><strong>SMTP:</strong> {{ acct.smtp_host }}:{{ acct.smtp_port }}</span>
      <span><strong>Folder:</strong> {{ acct.folder }}</span>
      <span><strong>Auth:</strong> {{ acct.auth }}</span>
      {% if acct.token_cache_present %}
      <span><strong>Token cache:</strong> present</span>
      {% endif %}
    </div>

    <div class="actions-toolbar">
      <button class="btn btn-action"
              hx-post="/config/email/{{ acct.name }}/test"
              hx-target="#email-result-{{ acct.name }}"
              hx-swap="innerHTML">Test connection</button>
      <button class="btn btn-action"
              hx-post="/config/email/{{ acct.name }}/list"
              hx-target="#email-result-{{ acct.name }}"
              hx-swap="innerHTML">List messages</button>
      <button class="btn btn-action"
              hx-post="/config/email/{{ acct.name }}/fetch"
              hx-target="#email-result-{{ acct.name }}"
              hx-swap="innerHTML">Fetch jobs</button>
      {% if acct.auth == "oauth" %}
      <button class="btn btn-action"
              hx-post="/config/email/{{ acct.name }}/auth"
              hx-target="#email-result-{{ acct.name }}"
              hx-swap="innerHTML">Authenticate (OAuth)</button>
      {% endif %}
      <form method="post" action="/config/email/{{ acct.name }}/remove"
            style="display:inline"
            onsubmit="return confirm('Remove account {{ acct.name }}?')">
        <button type="submit" class="btn btn-danger">Remove</button>
      </form>
    </div>

    <div id="email-result-{{ acct.name }}" class="email-result"></div>

    {# Edit form #}
    <details style="margin-top:0.75rem;border-top:1px solid var(--border);padding-top:0.75rem">
      <summary style="cursor:pointer;font-size:0.875rem;color:var(--muted)">Edit account</summary>
      <form method="post" action="/config/email/{{ acct.name }}/edit"
            style="display:grid;gap:0.6rem;max-width:28rem;margin-top:0.75rem">
        {% include "_email_form.html" with context %}
        <input type="hidden" name="name" value="{{ acct.name }}">
        <div>
          <button type="submit" class="btn btn-primary">Save changes</button>
        </div>
      </form>
    </details>
  </div>
  {% endfor %}
{% else %}
<p style="color:var(--muted)">No email accounts configured yet. Add one below.</p>
{% endif %}

{# Add account #}
<details style="margin-top:1.5rem;border:1px solid var(--border);border-radius:6px">
  <summary style="padding:0.6rem 0.75rem;cursor:pointer;font-weight:500">
    Add email account
  </summary>
  <div style="padding:0.75rem;border-top:1px solid var(--border)">
    <form method="post" action="/config/email/add"
          style="display:grid;gap:0.6rem;max-width:28rem">
      {% set acct = {} %}
      {% include "_email_form.html" with context %}
      <div>
        <button type="submit" class="btn btn-primary">Add account</button>
      </div>
    </form>
  </div>
</details>

<span id="action-status"
      hx-get="/actions/status?format=html"
      hx-trigger="load, every 2s"
      hx-swap="outerHTML"
      hx-target="#action-status"
      style="display:block;margin-top:1rem"></span>

{% endcall %}
{% endblock %}