{% extends "portal_base.html" %}
{% load static %}
{% block title %}{{ contact }} · Contact{% endblock %}
{% block topbar_title %}Contact · {{ contact }}{% endblock %}
{% block extra_head %}
<link rel="stylesheet" href="{% static 'css/address-autocomplete.css' %}">
{% endblock %}
{% block portal_content %}
<form method="post">
  {% csrf_token %}
  <div class="split">
    <div class="panel">
      <div class="panel-h"><h2>Profile</h2></div>
      <div class="panel-b form-grid">
        <div class="form-grid cols-2">
          <div class="field">
            <label for="id_first_name">First name</label>
            <input id="id_first_name" name="first_name" value="{{ contact.first_name }}" required>
          </div>
          <div class="field">
            <label for="id_last_name">Last name</label>
            <input id="id_last_name" name="last_name" value="{{ contact.last_name }}">
          </div>
        </div>
        <div class="form-grid cols-2">
          <div class="field">
            <label for="id_email">Email</label>
            <input id="id_email" name="email" type="email" value="{{ contact.email }}" required>
          </div>
          <div class="field">
            <label for="id_phone">Phone</label>
            <input id="id_phone" name="phone" value="{{ contact.phone }}">
          </div>
        </div>
        <div class="field"><label>Source</label><input value="{{ contact.get_source_display }}" readonly></div>

        <div data-address-autocomplete data-suggest-url="{% url 'address_suggest' %}">
          <div class="field address-ac-wrap">
            <label>Street address</label>
            <input name="address_line1" data-ac="line1" value="{{ contact.postal_address.line1|default:'' }}" autocomplete="off">
          </div>
          <div class="field">
            <label>Apt / suite</label>
            <input name="address_line2" data-ac="line2" value="{{ contact.postal_address.line2|default:'' }}" autocomplete="address-line2">
          </div>
          <div class="form-grid cols-2">
            <div class="field">
              <label>City</label>
              <input name="address_city" data-ac="city" value="{{ contact.postal_address.city|default:'' }}" autocomplete="address-level2">
            </div>
            <div class="field">
              <label>State</label>
              <input name="address_state" data-ac="state" value="{{ contact.postal_address.state|default:'' }}" autocomplete="address-level1" maxlength="32">
            </div>
          </div>
          <div class="form-grid cols-2">
            <div class="field">
              <label>ZIP</label>
              <input name="address_zip" data-ac="zip" value="{{ contact.postal_address.zip|default:'' }}" autocomplete="postal-code" maxlength="20">
            </div>
            <div class="field">
              <label>Country</label>
              <input name="address_country" data-ac="country" value="{{ contact.postal_address.country|default:'US' }}" autocomplete="country" maxlength="2">
            </div>
          </div>
        </div>

        <div class="field"><label>Notes</label>
          <textarea name="notes">{{ contact.notes }}</textarea>
        </div>
        <div style="display:flex;gap:8px;flex-wrap:wrap;align-items:center">
          <button class="btn btn-primary btn-sm" type="submit">Save</button>
          <a class="btn btn-ghost btn-sm" href="{% url 'contacts:list' %}">← Mailing list</a>
        </div>
      </div>
    </div>
    <div class="panel">
      <div class="panel-h"><h2>Consent</h2></div>
      <div class="panel-b">
        <div class="field">
          <label class="check-row"><input type="checkbox" name="consent_email" value="1" {% if prefs.email %}checked{% endif %}> Email marketing</label>
        </div>
        <div class="field">
          <label class="check-row"><input type="checkbox" name="consent_sms" value="1" {% if prefs.sms %}checked{% endif %}> SMS updates</label>
        </div>
        <div class="field">
          <label class="check-row"><input type="checkbox" name="consent_postcard" value="1" {% if prefs.postcard %}checked{% endif %}> Postcard mailings</label>
        </div>
        <p class="hint-block" style="margin-top:16px">Postcard mailings default on when a street address is on file. Uncheck to opt out. Opt-outs also write a suppression so campaigns skip this contact.</p>
      </div>
    </div>
  </div>
</form>
{% endblock %}
{% block extra_js %}
<script src="{% static 'js/address-autocomplete.js' %}"></script>
{% endblock %}