{% extends "base.html" %}
{% block title %}Email Look · {{ 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 Look</h1><p class="muted">{{ role.email }}</p></div></div>
<div class="look-layout">
<form method="post" class="card" id="look-form">
  <div class="field"><label>Company</label>
    <p class="hint">Their emails use this company's name, logo, colours, font and writing voice.</p>
    <select name="brand">{% for k, b in brands.items() %}<option value="{{ k }}" {{ 'selected' if role.brand == k }}>{{ b.name }}</option>{% endfor %}</select>
    <p class="hint" style="margin-top:6px"><a href="{{ url_for('brands') }}">Manage brands</a></p></div>

  <div class="field"><label>Style</label>
    <div class="choices">
      <label class="choice"><input type="radio" name="style" value="branded" {{ 'checked' if role.style != 'personal' }}>
        <span>Branded<small>Designed email with the company's logo and colours. Best for reports and materials.</small></span></label>
      <label class="choice"><input type="radio" name="style" value="personal" {{ 'checked' if role.style == 'personal' }}>
        <span>Personal<small>Looks typed in Gmail or Outlook. Replies quote the earlier message.</small></span></label>
    </div></div>

  <div class="field"><label>Signature</label>
    <label class="check"><input type="radio" name="signature_mode" value="auto" {{ 'checked' if not role.signature }}> <span>Automatic<small>Name, job title, company and email</small></span></label>
    <label class="check"><input type="radio" name="signature_mode" value="custom" {{ 'checked' if role.signature }}> <span>Their own signature<small>Paste it from Gmail or Outlook. Formatting, logos and links are kept.</small></span></label>
    <div class="sub" id="sig-box">
      <p class="hint">In Gmail: Settings → See all settings → Signature, select it all and copy. In Outlook: Settings → Mail → Compose and reply. Then click below and paste.</p>
      <div id="sig-edit" class="sig-edit" contenteditable="true">{{ role.signature|safe }}</div>
      <input type="hidden" name="signature" id="sig-value">
    </div>
  </div>
  <button class="btn primary big">Save</button>
</form>
<div>
  <div class="preview-head"><b>Preview</b></div>
  <div class="msg"><iframe id="preview" data-autosize src="{{ url_for('person_preview', key=key) }}"></iframe></div>
  <p class="muted small">This updates when you save.</p>
</div>
</div>
{% endblock %}
{% block scripts %}
<script>
const form = document.getElementById('look-form'), box = document.getElementById('sig-box'), edit = document.getElementById('sig-edit');
function refresh() { box.style.display = form.querySelector('[name=signature_mode]:checked').value === 'custom' ? '' : 'none'; }
form.addEventListener('change', refresh); refresh();
form.addEventListener('submit', () => { document.getElementById('sig-value').value = edit.innerHTML; });
</script>
{% endblock %}