{% extends "base.html" %}
{% block title %}Email Library{% endblock %}
{% block content %}
<div class="page-head">
  <div><h1>Email Library</h1>
    <p class="muted">Ready-written emails used by your automations when they aren't using AI. Each has a friendly, formal and direct tone, and some have more than one version so people don't get the same email every time. Change any wording here; words in {curly brackets} are filled in from your data.</p></div>
</div>

<form method="get" class="card" style="display:flex;flex-wrap:wrap;gap:16px;align-items:end">
  <div class="field" style="margin:0"><label>Tone</label>
    <div class="segmented">{% for t, label in tones.items() %}<label><input type="radio" name="tone" value="{{ t }}" {{ 'checked' if tone == t }} onchange="this.form.submit()"><span>{{ label }}</span></label>{% endfor %}</div></div>
  {% if sources %}<div class="field" style="margin:0;min-width:220px"><label>Example data</label>
    <select name="source" onchange="this.form.submit()">{% for n in sources %}<option value="{{ n }}" {{ 'selected' if n == source }}>{{ n.replace('_', ' ')|capitalize }}</option>{% endfor %}</select></div>{% endif %}
  <p class="hint" style="margin:0">Examples show what {{ recipient.name }} would get from {{ sender.name }} with this data.</p>
</form>

<div class="lib-tools">
  <input type="search" id="lib-search" placeholder="Search {{ groups|map(attribute=2)|map('length')|sum }} emails, e.g. “reminder” or “quote”" autocomplete="off">
  <div class="chips">{% for gkey, glabel, entries in groups if entries %}<a class="chip" href="#g-{{ gkey }}">{{ glabel }} <span class="muted">{{ entries|length }}</span></a>{% endfor %}</div>
  <p class="muted small" style="margin:8px 0 0">Responses are the automatic replies from your own people. Each email lists the responses that suit it, and automations pick the best match unless you choose one.</p>
  <p class="muted small" id="lib-none" hidden>No emails match. Try another word, or add your own at the bottom.</p>
</div>

{% for gkey, glabel, entries in groups if entries %}
<div class="card lib-group" id="g-{{ gkey }}">
  <h2>{{ glabel }}</h2>
  {% for purpose, e in entries %}
  {% set versions = e.tones.get(tone) or e.tones.get('friendly') or [] %}
  <div class="lib-email" id="{{ purpose }}">
    <div style="display:flex;gap:12px;align-items:start;flex-wrap:wrap">
      <div style="flex:1;min-width:200px"><h3>{{ e.name }} {% if e.edited %}<span class="pill">Edited</span>{% endif %}{% if e.custom %}<span class="pill">Yours</span>{% endif %}</h3>
        <p class="muted small" style="margin:0">{{ e.about }}</p>
        {% if e.kind == 'reply' and e.answers %}<p class="small pairs">Answers: {% for a in e.answers if a in names %}<a href="#{{ a }}">{{ names[a] }}</a>{{ ', ' if not loop.last }}{% endfor %}</p>
        {% elif pairs.get(purpose) %}<p class="small pairs">Suggested responses: {% for a in pairs[purpose] %}<a href="#{{ a }}">{{ names[a].replace('Reply: ', '') }}</a>{{ ', ' if not loop.last }}{% endfor %}</p>
        {% elif e.group in ('receivables', 'quotes') and e.kind == 'send' %}<p class="small pairs muted">Goes to customers: their replies are read by {{ product.name }}, not written.</p>{% endif %}</div>
      <button type="button" class="btn small" onclick="document.getElementById('edit-{{ purpose }}').toggleAttribute('hidden')">{{ icon('edit', 14) }} Edit</button>
    </div>
    {% for v in versions %}
    <div class="lib-version">
      <div class="lib-preview"><b>{{ example(v.subject) }}</b>Hi {{ recipient.name.split()[0] }},

{{ example(v.body) }}</div>
      {% if loop.first and versions|length > 1 %}<p class="muted small" style="margin:0">{{ versions|length }} versions rotate. Each person gets a different one from week to week.</p>{% endif %}
    </div>
    {% endfor %}
    <form method="post" id="edit-{{ purpose }}" hidden style="margin-top:14px">
      <input type="hidden" name="purpose" value="{{ purpose }}"><input type="hidden" name="tone" value="{{ tone }}"><input type="hidden" name="source" value="{{ source or '' }}">
      {% for v in versions + [{'subject': '', 'body': ''}] %}
      <div class="field"><label>{{ 'Version %d' % loop.index if v.body else 'Add another version (optional)' }}</label>
        <input type="text" name="subject" value="{{ v.subject }}" placeholder="Subject">
        <textarea name="body" rows="5" style="margin-top:6px" placeholder="Message (leave empty to remove this version)">{{ v.body }}</textarea></div>
      {% endfor %}
      <p class="hint">The greeting (“Hi …”) and signature are added automatically. Empty a version to remove it.</p>
      <div class="actions">
        <button class="btn primary" name="action" value="save">Save {{ tones[tone] }} Wording</button>
        {% if e.edited or e.custom %}<button class="btn" name="action" value="reset" data-confirm="{{ 'Go back to the original wording?' if e.edited else 'Remove this email from the library?' }}">{{ 'Reset to Original' if e.edited else 'Remove' }}</button>{% endif %}
      </div>
    </form>
  </div>
  {% endfor %}
</div>
{% endfor %}

<details class="card">
  <summary><span class="section-title" style="margin:0">Add your own email</span></summary>
  <form method="post" style="margin-top:12px">
    <input type="hidden" name="action" value="new">
    <div class="row">
      <div class="field"><label>Name</label><input type="text" name="name" placeholder="e.g. Quarter-end reminder" required></div>
      <div class="field"><label>Section</label><select name="group">{% for g, label in groups_list %}<option value="{{ g }}">{{ label }}</option>{% endfor %}</select></div>
      <div class="field"><label>Used for</label><select name="kind"><option value="send">The main email</option><option value="reply">A reply</option><option value="follow_up">A reminder</option></select></div>
    </div>
    <div class="field"><label>Subject</label><input type="text" name="subject" placeholder="e.g. Quarter-end: {overdue_total} outstanding"></div>
    <div class="field"><label>Message</label><textarea name="body" rows="5" required placeholder="e.g. As we approach quarter-end, {summary}"></textarea></div>
    <p class="hint">Useful fields: {summary}, {overdue_total}, {overdue_count}, {oldest_days}, {top_names}, {period}, {company}, {their_company}. Add “|text” to give a fallback, e.g. {overdue_total|the balance}.</p>
    <button class="btn primary">Add Email</button>
  </form>
</details>
{% endblock %}
{% block scripts %}
<script>
// Search the library: hides emails (and empty sections) that don't mention the words typed.
const q = document.getElementById('lib-search');
q.addEventListener('input', () => {
  const words = q.value.toLowerCase().split(/\s+/).filter(Boolean);
  let any = false;
  document.querySelectorAll('.lib-group').forEach(g => {
    let shown = 0;
    g.querySelectorAll('.lib-email').forEach(e => {
      const text = e.textContent.toLowerCase(), ok = words.every(w => text.includes(w));
      e.hidden = !ok; shown += ok;
    });
    g.hidden = !shown; any = any || shown > 0;
  });
  document.getElementById('lib-none').hidden = any;
});
</script>
{% endblock %}