{% extends "django_meta_whatsapp/base.html" %}
{% block title %}Inbox{% endblock %}
{% block page_title %}Inbox{% endblock %}
{% block topbar_actions %}
<a href="{% url 'django_meta_whatsapp:contact_list' %}" class="inline-flex items-center gap-2 bg-emerald-600 hover:bg-emerald-700 text-white text-sm font-medium px-4 py-2 rounded-lg transition-colors">
  <i data-lucide="user-plus" class="w-4 h-4"></i> New Contact
</a>
{% endblock %}
{% block content %}
<div class="space-y-4">
  <!-- Search + filters -->
  <form method="get" class="flex items-center gap-3">
    <div class="relative flex-1 max-w-sm">
      <i data-lucide="search" class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400"></i>
      <input name="q" value="{{ search_q }}" placeholder="Search conversations…" class="w-full pl-9 pr-4 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-emerald-500 bg-white"/>
    </div>
    <select name="label" onchange="this.form.submit()" class="text-sm border border-gray-200 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-emerald-500 bg-white">
      <option value="">All labels</option>
      {% for val, label in label_choices %}<option value="{{ val }}" {% if active_label == val %}selected{% endif %}>{{ label }}</option>{% endfor %}
    </select>
  </form>

  <div class="bg-white rounded-xl border border-gray-100 shadow-sm overflow-hidden">
    {% for conv in conversations %}
    <a href="{% url 'django_meta_whatsapp:chat_room' conv.phone_number %}" class="flex items-center gap-4 px-5 py-4 border-b border-gray-50 hover:bg-gray-50 transition-colors">
      <div class="w-11 h-11 rounded-full bg-emerald-100 flex items-center justify-center text-emerald-700 font-bold text-base flex-shrink-0">
        {{ conv.contact.name|default:conv.phone_number|first|upper }}
      </div>
      <div class="flex-1 min-w-0">
        <div class="flex items-center gap-2">
          <p class="text-sm font-semibold text-gray-900">{{ conv.contact.name|default:conv.phone_number }}</p>
          {% if conv.label %}<span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-700">{{ conv.label }}</span>{% endif %}
        </div>
        <p class="text-xs text-gray-400 mt-0.5">{{ conv.phone_number }}</p>
      </div>
      <div class="flex flex-col items-end gap-1 flex-shrink-0">
        <p class="text-xs text-gray-400">{{ conv.last_message_at|timesince }} ago</p>
        {% if conv.unread_count %}<span class="w-5 h-5 rounded-full bg-emerald-500 text-white text-xs flex items-center justify-center font-bold">{{ conv.unread_count }}</span>{% endif %}
      </div>
    </a>
    {% empty %}
    <div class="py-16 text-center">
      <i data-lucide="inbox" class="w-10 h-10 text-gray-300 mx-auto mb-3"></i>
      <p class="text-sm text-gray-400">No conversations yet. They'll appear here when customers message you.</p>
    </div>
    {% endfor %}
  </div>
</div>
{% endblock %}