{% extends "base.html" %}
{% load static %}

{% block title %}Lead: {{ lead.name }}{% endblock %}

{% block content %}
<div class="section">
  <div class="container" style="max-width: 48rem;">
    <p style="margin-bottom: 1rem;">
      <a href="{% url 'leads_list' %}" style="color: var(--text-muted);">← All leads</a>
    </p>

    <div style="display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; align-items: start; margin-bottom: 1.5rem;">
      <div>
        <h1 class="section-title" style="margin-bottom: 0.35rem;">{{ lead.name }}</h1>
        <p style="color: var(--text-muted); margin: 0;">
          {{ lead.created|date:"F j, Y g:i A" }}
          ·
          {% if lead.contacted %}
          <span>Contacted</span>
          {% else %}
          <span style="color: var(--primary-color);">New</span>
          {% endif %}
        </p>
      </div>
      <form action="{% url 'lead_toggle_contacted' lead.pk %}" method="post">
        {% csrf_token %}
        <input type="hidden" name="next" value="{% url 'lead_detail' lead.pk %}">
        <button type="submit" class="btn" style="border: 1px solid var(--primary-color); padding: 0.5rem 1.25rem; border-radius: 4px; color: var(--primary-color); background: transparent; cursor: pointer;">
          {% if lead.contacted %}Mark as new{% else %}Mark as contacted{% endif %}
        </button>
      </form>
    </div>

    {% if messages %}
    <ul style="list-style: none; margin-bottom: 1.5rem; padding: 0;">
      {% for message in messages %}
      <li style="color: var(--primary-color); margin-bottom: 0.35rem;">{{ message }}</li>
      {% endfor %}
    </ul>
    {% endif %}

    <div class="card" style="margin-bottom: 1.5rem; cursor: default;">
      <span class="card-title" style="font-size: 1.1rem;">Contact</span>
      <p class="card-text" style="margin-top: 0.75rem;">
        <strong>Email:</strong> <a href="mailto:{{ lead.email }}">{{ lead.email }}</a><br>
        <strong>Subject:</strong> {{ lead.subject }}
      </p>
    </div>

    <div class="card" style="margin-bottom: 1.5rem; cursor: default;">
      <span class="card-title" style="font-size: 1.1rem;">Message</span>
      <p class="card-text" style="margin-top: 0.75rem; white-space: pre-wrap;">{% if lead.blurb %}{{ lead.blurb }}{% else %}<span style="color: var(--text-muted);">(No message body)</span>{% endif %}</p>
    </div>

    <div class="card" style="margin-bottom: 1.5rem; cursor: default;">
      <span class="card-title" style="font-size: 1.1rem;">UTM attribution</span>
      {% if lead.utm_source or lead.utm_medium or lead.utm_campaign or lead.utm_term or lead.utm_content %}
      <div class="table-responsive" style="margin-top: 0.75rem;">
        <table class="table">
          <tbody>
            <tr><th style="width: 8rem;">Source</th><td>{{ lead.utm_source|default:"—" }}</td></tr>
            <tr><th>Medium</th><td>{{ lead.utm_medium|default:"—" }}</td></tr>
            <tr><th>Campaign</th><td>{{ lead.utm_campaign|default:"—" }}</td></tr>
            <tr><th>Term</th><td>{{ lead.utm_term|default:"—" }}</td></tr>
            <tr><th>Content</th><td>{{ lead.utm_content|default:"—" }}</td></tr>
          </tbody>
        </table>
      </div>
      {% else %}
      <p class="card-text" style="margin-top: 0.75rem; color: var(--text-muted);">No UTM params on this lead’s session.</p>
      {% endif %}
    </div>

    <p style="color: var(--text-muted); font-size: 0.85rem;">
      Last modified {{ lead.last_modified|date:"Y-m-d H:i" }} · ID {{ lead.pk }}
    </p>
  </div>
</div>
{% endblock %}