{% extends "django_meta_whatsapp/base.html" %}
{% block title %}Campaigns{% endblock %}
{% block page_title %}Campaigns{% endblock %}
{% block topbar_actions %}
<a href="{% url 'django_meta_whatsapp:campaign_create' %}" 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="plus" class="w-4 h-4"></i> New Campaign
</a>
{% endblock %}
{% block content %}
<div class="space-y-4">
  <form method="get" class="flex flex-wrap gap-3 bg-white p-3 rounded-xl border border-gray-100 shadow-sm">
    <div class="flex-1 min-w-[200px]">
      <div class="relative">
        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
          <i data-lucide="search" class="w-4 h-4 text-gray-400"></i>
        </div>
        <input type="text" name="q" value="{{ search_q }}" placeholder="Search campaigns..." 
               class="w-full pl-9 pr-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-emerald-500 placeholder-gray-400">
      </div>
    </div>
    
    <select name="status" 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 min-w-[140px]" onchange="this.form.submit()">
      <option value="">All statuses</option>
      {% for val, label in status_choices %}<option value="{{ val }}" {% if active_status == val %}selected{% endif %}>{{ label }}</option>{% endfor %}
    </select>

    <select name="template_id" 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 max-w-[200px] truncate" onchange="this.form.submit()">
      <option value="">All templates</option>
      {% for t in templates %}<option value="{{ t.id }}" {% if active_template == t.id|stringformat:"s" %}selected{% endif %}>{{ t.name }}</option>{% endfor %}
    </select>
    
    <button type="submit" class="hidden">Search</button>
  </form>
  <div class="bg-white rounded-xl border border-gray-100 shadow-sm overflow-hidden">
    <table class="w-full">
      <thead class="bg-gray-50 border-b border-gray-100">
        <tr>
          <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Campaign</th>
          <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Template</th>
          <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Status</th>
          <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Sent</th>
          <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Failed</th>
          <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Created</th>
          <th class="px-4 py-3 text-right text-xs font-semibold text-gray-500 uppercase tracking-wider">Actions</th>
        </tr>
      </thead>
      <tbody class="divide-y divide-gray-50">
        {% for camp in campaigns %}
        <tr class="hover:bg-gray-50">
          <td class="px-4 py-3">
            <a href="{% url 'django_meta_whatsapp:campaign_detail' camp.pk %}" class="text-sm font-medium text-gray-900 hover:text-emerald-600">{{ camp.name }}</a>
          </td>
          <td class="px-4 py-3 text-sm text-gray-500 font-mono">{{ camp.template.name|default:"—" }}</td>
          <td class="px-4 py-3">
            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
              {% if camp.status == 'completed' %}bg-emerald-100 text-emerald-700
              {% elif camp.status == 'running' %}bg-blue-100 text-blue-700
              {% elif camp.status == 'failed' %}bg-red-100 text-red-700
              {% elif camp.status == 'scheduled' %}bg-amber-100 text-amber-700
              {% elif camp.status == 'paused' %}bg-orange-100 text-orange-700
              {% else %}bg-gray-100 text-gray-600{% endif %}">
              {{ camp.get_status_display }}
            </span>
          </td>
          <td class="px-4 py-3 text-sm text-gray-700 font-medium">{{ camp.sent_count }}</td>
          <td class="px-4 py-3 text-sm {% if camp.failed_count > 0 %}text-red-600 font-medium{% else %}text-gray-400{% endif %}">{{ camp.failed_count }}</td>
          <td class="px-4 py-3 text-sm text-gray-400">{{ camp.created_at|date:"d M Y" }}</td>
          <td class="px-4 py-3 text-right">
            <div class="flex items-center justify-end gap-2">
              {% if camp.status in "draft,scheduled,failed" %}
              <form method="post" action="{% url 'django_meta_whatsapp:campaign_run' camp.pk %}">
                {% csrf_token %}
                <button type="submit" class="text-gray-400 hover:text-emerald-600" title="Run campaign"><i data-lucide="play" class="w-4 h-4"></i></button>
              </form>
              {% endif %}
              <a href="{% url 'django_meta_whatsapp:campaign_detail' camp.pk %}" class="text-gray-400 hover:text-blue-600" title="View"><i data-lucide="eye" class="w-4 h-4"></i></a>
              <a href="{% url 'django_meta_whatsapp:campaign_update' camp.pk %}" class="text-gray-400 hover:text-blue-600" title="Edit"><i data-lucide="pencil" class="w-4 h-4"></i></a>
              <a href="{% url 'django_meta_whatsapp:campaign_delete' camp.pk %}" class="text-gray-400 hover:text-red-600" title="Delete"><i data-lucide="trash-2" class="w-4 h-4"></i></a>
            </div>
          </td>
        </tr>
        {% empty %}
        <tr><td colspan="7" class="px-4 py-12 text-center text-sm text-gray-400">No campaigns yet. Create your first bulk messaging campaign.</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% endblock %}