{% extends "base.html" %}
{% block title %}Branding & Digests · Email Security{% endblock %}
{% block content %}
{% include "_email_nav.html" %}

<style>
  .br-head { display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:10px; margin-bottom:12px; }
  .card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:16px; box-shadow:var(--shadow-1); margin-bottom:14px; }
  .card h2 { font-size:12px; font-weight:700; margin:0 0 12px; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); }
  .brow { border:1px solid var(--line); border-radius:var(--r-md); padding:12px 14px; margin-bottom:10px; }
  .brow h3 { margin:0 0 8px; font-size:14px; }
  .fields { display:grid; grid-template-columns:1.4fr 1.4fr .6fr 2fr auto; gap:8px; align-items:end; }
  @media (max-width:880px){ .fields { grid-template-columns:1fr 1fr; } }
  .fields label { font-size:10px; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); font-weight:700; display:block; margin-bottom:4px; }
  .fields input { width:100%; background:var(--surface-2); border:1px solid var(--line); color:var(--ink); border-radius:8px; padding:8px 10px; font:inherit; }
  .fields input[type=color]{ padding:3px; height:36px; }
  .banner.ok { background:rgba(74,222,128,.1); border:1px solid rgba(74,222,128,.3); color:var(--ok); padding:9px 12px; border-radius:var(--r-md); font-size:12.5px; margin-bottom:12px; }
  .sched { display:flex; gap:14px; align-items:end; flex-wrap:wrap; }
  .sched label { font-size:11px; color:var(--muted); font-weight:700; }
  .sched input, .sched select { background:var(--surface-2); border:1px solid var(--line); color:var(--ink); border-radius:8px; padding:8px 10px; font:inherit; }
  .muted { color:var(--muted); }
</style>

<div class="br-head">
  <div>
    <h1 class="page-title" style="margin-bottom:2px;">Branding &amp; Digest Schedule</h1>
    <p class="muted" style="margin:0;">Customise the recipient-facing pages (digest emails, blocked-link &amp; release pages) per organization, and schedule automatic digests.</p>
  </div>
  <a class="btn btn-ghost" href="/email">&lsaquo; Email Security</a>
</div>

{% if saved %}<div class="banner ok">Saved.</div>{% endif %}

<div class="card">
  <h2>Automatic quarantine digests</h2>
  <form class="sched" method="post" action="/email/digests/schedule">
    <label style="display:block; margin-bottom:8px;"><input type="checkbox" name="mailbox_enabled" {% if mailbox_digest_on %}checked{% endif %}> <strong>Mailbox quarantine reminders</strong> &mdash; email each connected-mailbox owner a daily summary of their held mail <span class="muted">(recommended &mdash; this is the one that reaches your users)</span></label>
    <label style="display:block;"><input type="checkbox" name="enabled" {% if digest_on %}checked{% endif %}> <strong>Gateway digests</strong> &mdash; branded release-link digest for MX-mode quarantined mail <span class="muted">(only relevant once inbound MX is cut over)</span></label>
    <div><label>Hour (PT)</label><br>
      <select name="hour">{% for h in range(24) %}<option value="{{ h }}" {% if digest_hour|int == h %}selected{% endif %}>{{ '%02d:00'|format(h) }}</option>{% endfor %}</select></div>
    <button class="btn btn-primary" type="submit">Save schedule</button>
  </form>
  <p class="muted" style="font-size:12px; margin:10px 0 0;">When on, each recipient with held mail gets one branded digest per day at the chosen hour. (Manual "Send digests" stays available on the Quarantine page.)</p>
</div>

<div class="card">
  <h2>Per-organization branding</h2>
  {% for r in rows %}
  <div class="brow">
    <h3>{{ r.org.name }}</h3>
    <form method="post" action="/email/branding/{{ r.org.id }}">
      <div class="fields">
        <div><label>Brand name</label><input type="text" name="brand_name" value="{{ r.b.brand_name if r.b else '' }}" placeholder="SD RMM Email Security"></div>
        <div><label>Support email</label><input type="text" name="support_email" value="{{ r.b.support_email if r.b else '' }}" placeholder="it@org.com"></div>
        <div><label>Accent</label><input type="color" name="accent_color" value="{{ r.b.accent_color if (r.b and r.b.accent_color) else '#60a5fa' }}"></div>
        <div><label>Footer</label><input type="text" name="footer" value="{{ r.b.footer if r.b else '' }}" placeholder="Protected by …"></div>
        <button class="btn btn-primary" type="submit">Save</button>
      </div>
    </form>
  </div>
  {% else %}<p class="muted">No organizations.</p>{% endfor %}
</div>

{% endblock %}