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

{% block title %}Events Management - Admin Panel{% endblock %}

{% block page_title %}All Events{% endblock %}

{% block content %}
<!-- Savings Events Management -->
<div class="p-8">
    <div class="flex justify-between items-center mb-8">
        <div>
            <h3 class="text-2xl font-bold text-gray-900 mb-2">
                Savings Events Management
            </h3>
            <p class="text-gray-600">
                Create and manage special collection events for your group
            </p>
        </div>
        <a href="{{ url_for('admin_create_event') }}" class="inline-flex items-center px-6 py-3 border border-transparent text-sm font-medium rounded-xl text-white bg-gradient-to-r from-emerald-500 to-blue-500 hover:from-emerald-600 hover:to-blue-600 shadow-lg shadow-emerald-500/25 transition-all duration-200">
            <i class="fas fa-plus mr-2"></i>Create Event
        </a>
    </div>

        <div class="bg-white dark:bg-gray-800 shadow overflow-hidden sm:rounded-md">
            <ul role="list" class="divide-y divide-gray-200 dark:divide-gray-700">
                {% for event in events %}
                <li class="px-6 py-4">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center">
                            <div class="flex-shrink-0 h-12 w-12">
                                <div class="h-12 w-12 rounded-full bg-orange-100 dark:bg-orange-900 flex items-center justify-center">
                                    <i class="fas fa-bullseye text-orange-600 dark:text-orange-400"></i>
                                </div>
                            </div>
                            <div class="ml-4">
                                <div class="text-sm font-medium text-gray-900 dark:text-white">
                                    {{ event.name }}
                                </div>
                                <div class="text-sm text-gray-500 dark:text-gray-400">
                                    {{ event.start_date.strftime('%b %d, %Y') }} - {{ event.end_date.strftime('%b %d, %Y') }}
                                </div>
                                {% if event.description %}
                                <div class="text-sm text-gray-500 dark:text-gray-400">
                                    {{ event.description }}
                                </div>
                                {% endif %}
                            </div>
                        </div>
                        <div class="flex items-center space-x-4">
                            <div class="text-right">
                                {% if event.target_amount %}
                                <div class="text-sm font-medium text-gray-900 dark:text-white">
                                    Target: ৳{{ "%.2f"|format(event.target_amount) }}
                                </div>
                                {% endif %}
                                <div class="text-sm text-gray-500 dark:text-gray-400">
                                    Created {{ event.created_at.strftime('%b %d, %Y') }}
                                </div>
                            </div>
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium 
                                {% if event.is_active %}bg-green-100 text-green-800{% else %}bg-red-100 text-red-800{% endif %}">
                                {% if event.is_active %}Active{% else %}Inactive{% endif %}
                            </span>
                        </div>
                    </div>
                </li>
                {% else %}
                <li class="px-6 py-8">
                    <div class="text-center">
                        <i class="fas fa-calendar-alt text-4xl text-gray-300 dark:text-gray-600 mb-4"></i>
                        <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">No savings events found.</p>
                        <a href="{{ url_for('admin_create_event') }}" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-primary-600 hover:bg-primary-700">
                            <i class="fas fa-plus mr-2"></i>Create First Event
                        </a>
                    </div>
                </li>
                {% endfor %}
            </ul>
        </div>
    </div>
</div>
{% endblock %}