{% extends "base.html" %}
{% load common_extras %}
{% comment %}
One contact (issue #13).

Four panes, each its own partial with its own refresh trigger, because they
change independently: editing a field does not alter the channel list, and
starting a flow does not alter the tags. A single container refreshed on every
mutation would re-run every query on the page to redraw one line.

Everything here is attacker-controlled — names, emails, platform usernames and
profile picture URLs all arrive from strangers (SECURITY-BASELINE §2). Django
autoescapes, nothing is marked safe, and the avatar URL is scheme-checked in
apps/contacts/activity.py before it can become a src.
{% endcomment %}

{% block title %}{{ contact.display_name }} · Contacts · DemandTrail Messaging{% endblock %}

{% block page_header %}
  <div class="flex items-start justify-between gap-4 mb-4">
    <div class="flex items-center gap-3 min-w-0">
      {% if avatar_url %}
        <img class="crm-avatar" src="{{ avatar_url }}" alt="" referrerpolicy="no-referrer" loading="lazy">
      {% else %}
        <span class="crm-avatar crm-avatar-empty" aria-hidden="true">{{ contact.display_name|first|upper }}</span>
      {% endif %}
      <div class="min-w-0">
        <h1 class="truncate">{{ contact.display_name }}</h1>
        <p class="muted text-xs">
          Added {{ contact.created_at }}{% if contact.last_interaction_at %} · last seen {{ contact.last_interaction_at }}{% endif %}
        </p>
      </div>
    </div>
    <div class="flex items-center gap-2 flex-shrink-0">
      <a class="media-pill" href="{% url 'contacts:list' workspace_id=request.workspace.id %}">Back to contacts</a>
      {% if can_manage_crm %}
        {% comment %}
          SPEC §19's subject access response. A plain link, not htmx: the answer
          is a file download, and hx-get would swap JSON into the DOM.
        {% endcomment %}
        <a class="bb-icon-action"
           href="{% url 'contacts:subject_export' workspace_id=request.workspace.id contact_id=contact.id %}"
           aria-label="Export contact data" title="Export contact data" download>
          <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3v12m0 0 4-4m-4 4-4-4M4 17v3h16v-3"/></svg>
        </a>
      {% endif %}
      {% if can_manage_crm %}
        <form class="mb-0"
              hx-post="{% url 'contacts:delete' workspace_id=request.workspace.id contact_id=contact.id %}"
              hx-swap="none"
              hx-confirm="Delete {{ contact.display_name }}? They are hidden everywhere, drop out of every segment, and any running automation stops."
              hx-on::after-request="if (event.detail.successful) window.location = '{% url 'contacts:list' workspace_id=request.workspace.id %}'">
          <button type="submit" class="btn-outline btn-inline btn-danger-soft">Delete contact</button>
        </form>
      {% endif %}
    </div>
  </div>
{% endblock %}

{% block content %}
<div class="crm-detail">

  <div class="crm-detail-main">
    {# ── System fields ───────────────────────────────────────────── #}
    <section class="crm-panel">
      <h2>Details</h2>
      {% if can_edit_contacts %}
        <p class="muted text-xs">Each field saves on its own when you leave it.</p>
      {% else %}
        <p class="muted text-xs">You have read-only access to this workspace.</p>
      {% endif %}
      {% for row in editable_fields %}
        <div class="crm-inline-field">
          <label for="field-{{ row.name }}">{{ row.label }}</label>
          {% if can_edit_contacts %}
            <form class="mb-0"
                  hx-post="{% url 'contacts:edit' workspace_id=request.workspace.id contact_id=contact.id %}"
                  hx-swap="none"
                  hx-trigger="change from:find input, submit">
              <input type="text" id="field-{{ row.name }}" name="{{ row.name }}" value="{{ row.value }}">
            </form>
          {% else %}
            <input type="text" id="field-{{ row.name }}" value="{{ row.value }}" readonly disabled>
          {% endif %}
        </div>
      {% endfor %}
    </section>

    {# ── Custom fields ───────────────────────────────────────────── #}
    <section class="crm-panel">
      <h2>Custom fields</h2>
      {% if field_values %}
        {% for row in field_values %}
          <div class="crm-inline-field">
            <label for="custom-{{ row.field.id }}">{{ row.field.name }} <span class="muted text-xs">({{ row.field.get_type_display }})</span></label>
            {% if can_edit_contacts %}
              <form class="mb-0"
                    hx-post="{% url 'contacts:field_value' workspace_id=request.workspace.id contact_id=contact.id field_id=row.field.id %}"
                    hx-swap="none"
                    hx-trigger="change from:find input, change from:find select, submit">
                {% if row.is_boolean %}
                  <select id="custom-{{ row.field.id }}" name="value" class="w-32">
                    <option value="" {% if not row.has_value %}selected{% endif %}>Not set</option>
                    <option value="true" {% if row.form_value == "true" %}selected{% endif %}>true</option>
                    <option value="false" {% if row.form_value == "false" %}selected{% endif %}>false</option>
                  </select>
                {% elif row.is_number %}
                  <input type="number" step="any" id="custom-{{ row.field.id }}" name="value" value="{{ row.form_value }}">
                {% elif row.is_date %}
                  <input type="date" id="custom-{{ row.field.id }}" name="value" value="{{ row.form_value }}">
                {% elif row.is_datetime %}
                  <input type="datetime-local" id="custom-{{ row.field.id }}" name="value" value="{{ row.form_value }}">
                {% else %}
                  <input type="text" id="custom-{{ row.field.id }}" name="value" value="{{ row.form_value }}" maxlength="2000">
                {% endif %}
              </form>
            {% else %}
              <input type="text" id="custom-{{ row.field.id }}" value="{{ row.form_value|default:'Not set' }}" readonly disabled>
            {% endif %}
          </div>
        {% endfor %}
        {% comment %}
          The clear affordance is "empty the box": clear_field_value deletes the
          row rather than storing an empty string, which is what keeps the check
          constraint's "exactly one column populated" true and what the condition
          engine's no_value operator means.
        {% endcomment %}
        <p class="muted text-xs">Emptying a field removes its value entirely.</p>
      {% else %}
        <p class="muted">
          No custom fields yet.
          {% if can_manage_crm %}<a href="{% url 'contacts:field_list' workspace_id=request.workspace.id %}">Add one</a>.{% endif %}
        </p>
      {% endif %}
    </section>

    {# ── Activity ────────────────────────────────────────────────── #}
    {% include "contacts/_activity.html" %}

    {# ── Danger zone (SPEC §19, issue #29) ───────────────────────── #}
    {% comment %}
      Admin only, and last on the page on purpose: erasure is the one action in
      the CRM with no undo. Delete above hides a person; this removes them.

      The typed confirmation is enforced in the view, not here. hx-confirm is a
      window.confirm and proves nothing about a request that did not come from
      this page — it is the speed bump, and the two hidden/typed values the form
      posts are the control. See apps/contacts/views.py::contact_erase.
    {% endcomment %}
    {% if can_erase_contacts %}
      <section class="crm-panel crm-danger-zone">
        <h2>Erase permanently</h2>
        <p class="muted text-sm">
          Removes {{ contact.display_name }} outright: their profile, custom field values, tags, channel
          identities, consent records, conversations and message bodies. Counters stay, anonymised. A
          suppressed email address is kept, because that is a fact about a mailbox rather than about this
          contact. <strong>This cannot be undone.</strong>
        </p>
        <form class="crm-danger-form mb-0"
              hx-post="{% url 'contacts:erase' workspace_id=request.workspace.id contact_id=contact.id %}"
              hx-swap="none"
              hx-confirm="Erase {{ contact.display_name }} permanently? Their messages, identities and consent records are removed for good. This cannot be undone."
              hx-on::after-request="if (event.detail.successful) window.location = '{% url 'contacts:list' workspace_id=request.workspace.id %}'">
          <input type="hidden" name="contact_id" value="{{ contact.id }}">
          <label class="text-sm" for="erase-confirm">Type <code>{{ erase_confirmation }}</code> to confirm</label>
          <input type="text" id="erase-confirm" name="confirm" autocomplete="off" spellcheck="false"
                 placeholder="{{ erase_confirmation }}" required>
          <button type="submit" class="btn-outline btn-inline btn-danger-soft">Erase contact</button>
        </form>
      </section>
    {% endif %}
  </div>

  <aside class="crm-detail-side">
    {% include "contacts/_tag_chips.html" %}
    {% include "contacts/_channels.html" %}
  </aside>
</div>
{% endblock %}