{% extends "base.html" %}
{% block title %}People{% endblock %}
{% block content %}
<div class="page-head"><div><h1>People</h1><p class="muted">The people who send and receive emails. Each has their own email account.</p></div></div>
<form method="post" class="card">
  <table class="people">
    <tr><th>Name</th><th>Goes by</th><th>Job title</th><th>Email address</th><th>Email account</th><th>Look</th></tr>
    {% for key, r in roles.items() %}
    <tr>
      <td><input type="hidden" name="key" value="{{ key }}"><input type="text" name="name" value="{{ r.name }}" required></td>
      <td><input type="text" name="goes_by" value="{{ r.goes_by }}" placeholder="{{ r.name.split()[0] }}" style="max-width:110px"></td>
      <td><input type="text" name="title" value="{{ r.title }}"></td>
      <td><input type="email" name="email" value="{{ r.email }}" required></td>
      <td style="white-space:nowrap">
        {% set st = status[key] %}
        {% if st.provider == 'local' %}<span class="pill">Simulated</span>
        {% elif st.provider == 'elsewhere' %}<span class="pill">Own computer</span>
        {% elif st.error %}<span class="pill review" title="{{ st.error }}">Problem</span>
        {% elif st.connected %}<span class="pill on">{{ st.label.split(' / ')[0] }}</span>
        {% else %}<span class="pill review">Not connected</span>{% endif %}
        <a class="btn small" href="{{ url_for('person_email', key=key) }}">{{ 'Connect' if st.provider == 'local' or not st.connected else 'Manage' }}</a>
        </td>
      <td style="white-space:nowrap"><span class="small muted">{{ brands[r.brand].name if r.brand in brands else brands['main'].name }} · {{ r.style|capitalize }}</span>
        <a class="btn small" href="{{ url_for('person_look', key=key) }}">Email Look</a>
        <button type="button" class="btn small danger" onclick="this.closest('tr').remove()" title="Remove">✕</button></td>
    </tr>
    {% endfor %}
    <tr><td colspan="5" class="muted small" style="padding-top:14px">Add someone:</td></tr>
    <tr>
      <td><input type="hidden" name="key" value=""><input type="text" name="name" placeholder="Full name"></td>
      <td><input type="text" name="goes_by" placeholder="e.g. Phil" style="max-width:110px"></td>
      <td><input type="text" name="title" placeholder="Job title"></td>
      <td><input type="email" name="email" placeholder="name@company.com"></td>
      <td></td><td></td>
    </tr>
  </table>
  <p class="muted small" style="margin-top:14px">Use <b>Connect</b> to link each person's real email account. Until then their emails are simulated and only appear in this app. Save any changes to names or addresses first. <b>Goes by</b> is the name emails greet them with (e.g. Phil for Phillip); leave it empty to use their first name.</p>
  <button class="btn primary">Save People</button>
</form>
{% endblock %}