{% extends "portal_base.html" %}
{% block title %}{{ lead.contact }} · Lead{% endblock %}
{% block topbar_title %}Lead · {{ lead.contact }}{% endblock %}
{% block portal_content %}
<div class="split">
  <div>
    <div class="panel">
      <div class="panel-h"><h2>Contact</h2></div>
      <div class="panel-b form-grid">
        <div class="form-grid cols-2">
          <div class="field">
            <label>Email</label>
            <input type="email" value="{{ lead.contact.email }}" readonly>
          </div>
          <div class="field">
            <label>Phone</label>
            <input type="text" value="{{ lead.contact.phone }}" readonly>
          </div>
        </div>
        <div class="field">
          <label>Message</label>
          <textarea readonly style="min-height:120px">{{ lead.message }}</textarea>
        </div>
        <div class="field">
          <label>Status</label>
          <input type="text" value="{{ lead.get_status_display }}" readonly>
        </div>
        <p class="hint-block">Status edits and note posting come next in functionality work.</p>
        <a class="btn btn-ghost btn-sm" href="{% url 'leads:list' %}">← Back to inbox</a>
      </div>
    </div>
    <div class="panel">
      <div class="panel-h"><h2>Notes</h2></div>
      <div class="panel-b">
        {% for note in lead.notes.all %}
        <div style="font-size:13px;color:#6b7280;margin-bottom:12px">
          <strong style="color:#1a1f2c">{% if note.author %}{{ note.author }}{% else %}System{% endif %}</strong>
          · {{ note.created_at|date:"M j, g:i A" }} — {{ note.body }}
        </div>
        {% empty %}
        <p class="empty-state" style="padding:0;margin:0 0 12px">No notes yet.</p>
        {% endfor %}
      </div>
    </div>
  </div>
  <div>
    <div class="panel">
      <div class="panel-h"><h2>Attribution</h2></div>
      <div class="panel-b" style="font-size:14px">
        {% if lead.attribution %}
        <p>
          <strong>utm_source</strong> {{ lead.attribution.utm_source|default:"—" }}<br>
          <strong>utm_medium</strong> {{ lead.attribution.utm_medium|default:"—" }}<br>
          <strong>utm_campaign</strong> {{ lead.attribution.utm_campaign|default:"—" }}<br>
          {% if lead.attribution.visit %}
          <strong>Landing</strong> {{ lead.attribution.visit.path|default:"—" }}<br>
          <strong>First touch</strong> {{ lead.attribution.visit.created_at|date:"M j, g:i A" }}
          {% endif %}
          <br><strong>Converted</strong> {{ lead.created_at|date:"M j, g:i A" }}
        </p>
        {% else %}
        <p class="muted">No UTM attribution on this lead.</p>
        {% endif %}
      </div>
    </div>
    <div class="panel">
      <div class="panel-h"><h2>Linked contact · consent</h2></div>
      <div class="panel-b">
        <div class="consent-pills">
          {% for channel, opted in consent_map.items %}
            <span class="badge {% if opted %}badge-optin{% else %}badge-optout{% endif %}">
              {{ channel|title }} {% if opted %}on{% else %}off{% endif %}
            </span>
          {% empty %}
            <span class="muted">No consent records.</span>
          {% endfor %}
        </div>
        <p style="font-size:13px;color:#6b7280;margin:12px 0 0">
          Form submit defaulted email opt-in with notice. Postcard requires address + separate consent.
        </p>
        <p style="margin-top:12px">
          <a href="{% url 'contacts:detail' lead.contact.pk %}">Open contact record →</a>
        </p>
      </div>
    </div>
  </div>
</div>
{% endblock %}