{% extends "base.html" %}
{% block title %}Address Book{% endblock %}
{% block content %}
<div class="page-head">
  <div><h1>Address Book</h1><p class="muted">Everyone who can receive emails, inside or outside your group. Put people in groups (e.g. “Project managers”) to email them together.</p></div>
  <a class="btn" href="{{ url_for('contacts', export=1) }}">Download as CSV</a>
</div>

<div class="grid grid-2">
<form method="post" class="card">
  <input type="hidden" name="action" value="save">{% if edit %}<input type="hidden" name="id" value="{{ edit.id }}">{% endif %}
  <h2>{{ 'Edit ' + edit.name if edit else 'Add a Contact' }}</h2>
  <div class="row">
    <div class="field"><label>Name</label><input type="text" name="name" value="{{ edit.name if edit else '' }}" required></div>
    <div class="field"><label>Email</label><input type="email" name="email" value="{{ edit.email if edit else '' }}" required></div>
  </div>
  <div class="row">
    <div class="field"><label>Company</label><input type="text" name="company" value="{{ edit.company or '' if edit else '' }}" placeholder="Leave empty if inside your group"></div>
    <div class="field"><label>Job title</label><input type="text" name="title" value="{{ edit.title or '' if edit else '' }}"></div>
  </div>
  <div class="field"><label>Groups</label><input type="text" name="groups" value="{{ edit.groups or '' if edit else '' }}" placeholder="e.g. Project managers, Distributors" list="group-names">
    <datalist id="group-names">{% for g in groups %}<option value="{{ g }}">{% endfor %}</datalist>
    <p class="hint" style="margin-top:6px">Separate several groups with commas.</p></div>
  <div class="field"><label>Notes</label><input type="text" name="notes" value="{{ edit.notes or '' if edit else '' }}"></div>
  <div class="actions"><button class="btn primary">Save</button>{% if edit %}<a class="btn" href="{{ url_for('contacts') }}">Cancel</a>{% endif %}</div>
</form>

<div>
  <form method="post" enctype="multipart/form-data" class="card">
    <input type="hidden" name="action" value="import">
    <h2>Import a List</h2>
    <p class="muted">An Excel or CSV file with columns like Name, Email, Company, Title, Groups. Existing emails are updated.</p>
    <div class="actions"><input type="file" name="file" accept=".csv,.xlsx" required><button class="btn">Import</button></div>
  </form>
  {% if groups %}<div class="card"><h2>Groups</h2><ul class="list">
    {% for g, members in groups.items() %}<li><div class="body"><b>{{ g }}</b><span class="muted">{{ members|map(attribute='name')|join(', ') }}</span></div><span class="pill">{{ members|length }}</span></li>{% endfor %}
  </ul><p class="muted small">People under People can be in groups too (People page).</p></div>{% endif %}
</div>
</div>

<div class="card">
  <h2>Contacts</h2>
  {% if contacts %}<ul class="list">{% for c in contacts %}
    <li><div class="body"><b>{{ c.name }}</b><span class="muted">{{ c.email }}{% if c.company %} · {{ c.company }}{% endif %}{% if c.title %} · {{ c.title }}{% endif %}</span></div>
      {% for g in (c.groups or '').split(',') if g.strip() %}<span class="pill">{{ g.strip() }}</span>{% endfor %}
      <div class="actions"><a class="btn small" href="{{ url_for('contacts', edit=c.id) }}">Edit</a>
        <form class="inline" method="post" data-confirm="Delete {{ c.name }}?"><input type="hidden" name="action" value="delete"><input type="hidden" name="id" value="{{ c.id }}"><button class="btn small danger">Delete</button></form></div></li>
  {% endfor %}</ul>{% else %}<div class="empty">No contacts yet.</div>{% endif %}
</div>
{% endblock %}