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

{% block title %}WhatsApp Templates - Semua Event{% endblock %}

{% block content %}
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 lg:py-8">
    <!-- Header -->
    <div class="bg-gradient-to-r from-green-500 to-green-600 rounded-xl p-4 sm:p-6 mb-6 text-white shadow-lg">
        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 sm:gap-0">
            <div>
                <h1 class="text-xl sm:text-2xl md:text-3xl font-bold mb-2">
                    <i class="fab fa-whatsapp mr-2"></i>WhatsApp Templates
                </h1>
                <p class="text-green-100 text-sm sm:text-base">Pilih event untuk mengelola template WhatsApp</p>
            </div>
            <div class="flex flex-wrap gap-2">
                <a href="{% url 'event_admin:event_list' %}" 
                   class="inline-flex items-center px-4 py-2 bg-white bg-opacity-20 hover:bg-opacity-30 rounded-lg text-sm font-medium transition-all">
                    <i class="fas fa-calendar mr-2"></i>Daftar Event
                </a>
            </div>
        </div>
    </div>

    <!-- Events List -->
    <div class="bg-white rounded-xl shadow-md overflow-hidden">
        {% if events_with_count %}
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 p-6">
            {% for item in events_with_count %}
            <div class="border-2 border-gray-200 rounded-lg p-4 hover:border-green-500 transition-all hover:shadow-lg">
                <div class="flex items-start justify-between mb-3">
                    <div class="flex-1">
                        <h3 class="font-semibold text-gray-900 mb-1">{{ item.event.judul }}</h3>
                        <p class="text-xs text-gray-500 mb-2">
                            <i class="fas fa-calendar mr-1"></i>{{ item.event.tanggal_mulai|date:"d M Y" }}
                        </p>
                        <div class="flex items-center gap-2">
                            <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">
                                <i class="fab fa-whatsapp mr-1"></i>{{ item.template_count }} Template
                            </span>
                            {% if item.event.status == 'published' %}
                            <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">
                                Published
                            </span>
                            {% elif item.event.status == 'ongoing' %}
                            <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
                                Ongoing
                            </span>
                            {% endif %}
                        </div>
                    </div>
                </div>
                <div class="flex gap-2 mt-4">
                    <a href="{% url 'event_admin:whatsapp_templates_list' item.event.id %}" 
                       class="flex-1 inline-flex items-center justify-center px-3 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors text-sm font-medium">
                        <i class="fab fa-whatsapp mr-1"></i>Kelola Templates
                    </a>
                    <a href="{% url 'event_admin:event_detail' item.event.id %}" 
                       class="px-3 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm font-medium">
                        <i class="fas fa-eye"></i>
                    </a>
                </div>
            </div>
            {% endfor %}
        </div>
        {% else %}
        <div class="text-center py-12">
            <i class="fab fa-whatsapp text-gray-400 text-6xl mb-4"></i>
            <h3 class="text-lg font-semibold text-gray-600 mb-2">Belum Ada Template WhatsApp</h3>
            <p class="text-gray-500 mb-6">Belum ada event yang memiliki template WhatsApp. Buat template di halaman detail event.</p>
            <a href="{% url 'event_admin:event_list' %}" 
               class="inline-flex items-center px-6 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors font-medium">
                <i class="fas fa-calendar mr-2"></i>Lihat Daftar Event
            </a>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}