{% extends "admin/base.html" %}

{% block title %}Leads | Admin{% endblock %}

{% block content %}
<p class="eyebrow-dark">Enquiries</p>
<h1 class="mt-3 text-4xl font-black tracking-normal">Leads</h1>

<div class="mt-8 grid gap-4">
  {% for lead in leads %}
    <article class="rounded-lg border border-zinc-200 bg-white p-5 shadow-sm {{ 'opacity-70' if lead.is_read }}">
      <div class="flex flex-col justify-between gap-3 sm:flex-row">
        <div>
          <p class="font-black">{{ lead.customer_name or 'Unnamed enquiry' }}</p>
          <p class="mt-1 text-sm text-zinc-600">{{ lead.customer_email }} {{ lead.customer_phone }} {{ lead.customer_whatsapp }}</p>
          <p class="mt-1 text-xs font-bold uppercase tracking-[0.12em] text-zinc-500">{{ lead.language_code }} / {{ lead.created_at }} / {{ lead.stock_number or 'General enquiry' }}</p>
        </div>
        {% if not lead.is_read %}
          <form method="post" action="{{ url_for('admin_lead_read', id=lead.id) }}"><button class="btn-outline py-2" type="submit">Mark Read</button></form>
        {% endif %}
      </div>
      <p class="mt-4 text-sm leading-6 text-zinc-700">{{ lead.message }}</p>
    </article>
  {% else %}
    <p class="rounded-lg border border-zinc-200 bg-white p-6 text-zinc-600">No leads yet.</p>
  {% endfor %}
</div>
{% endblock %}