{% extends 'auth/dashboard.html' %}
{% load static %}

{% block content %}
<div class="max-w-7xl mx-auto px-4 py-6 space-y-6">
    
    <!-- Page Header -->
    <div class="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4">
        <div>
            <h1 class="text-2xl font-bold text-gray-800 flex items-center">
                <i class="fas fa-users text-tea-green-600 mr-2"></i> My Groups
            </h1>
            <p class="text-sm text-gray-600 mt-1">
                {% if request.user.is_superuser or request.user.type == 'FIELD_OFFICER' %}
                    Manage all farmer groups in the system
                {% else %}
                    View and manage your group memberships
                {% endif %}
            </p>
        </div>

        {% if request.user.is_superuser or request.user.type == 'FIELD_OFFICER' %}
        <a href="{% url 'contract_market_place:create_group' %}"
           class="inline-flex items-center justify-center px-5 py-2.5 bg-tea-green-600 hover:bg-tea-green-700 text-white rounded-lg font-semibold shadow-md hover:shadow-lg transition">
            <i class="fas fa-plus mr-2"></i> Register New Group
        </a>
        {% endif %}
    </div>

    <!-- Groups Grid -->
    {% if groups %}
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
        {% for group in groups %}
        <div class="bg-white rounded-xl shadow-md hover:shadow-xl transition-all duration-300 p-5 border-l-4 
            {% if group.is_active %}border-tea-green-500{% else %}border-gray-400{% endif %}
            relative overflow-hidden">
            
            <!-- Status Badge -->
            <div class="absolute top-0 right-0">
                {% if group.is_active %}
                <div class="w-3 h-3 bg-green-400 rounded-bl-lg"></div>
                {% else %}
                <div class="w-3 h-3 bg-red-400 rounded-bl-lg"></div>
                {% endif %}
            </div>

            <!-- Group Name & Status -->
            <div class="flex justify-between items-start mb-3">
                <h3 class="text-lg font-bold text-gray-800 pr-6">{{ group.name }}</h3>
            </div>
            
            <!-- Group Info -->
            <div class="space-y-2 mb-4">
                <p class="text-sm text-gray-600 flex items-center">
                    <i class="fas fa-id-card text-tea-green-600 mr-2 w-4"></i>
                    <span class="truncate">{{ group.registration_number }}</span>
                </p>
                <p class="text-sm text-gray-600 flex items-center">
                    <i class="fas fa-map-marker-alt text-tea-green-600 mr-2 w-4"></i>
                    <span class="truncate">{{ group.location }}</span>
                </p>
                <p class="text-sm text-gray-600 flex items-center">
                    <i class="fas fa-calendar text-tea-green-600 mr-2 w-4"></i>
                    <span>{{ group.created_at|date:"M d, Y" }}</span>
                </p>
            </div>

            <!-- Member Count & Actions -->
            <div class="flex justify-between items-center pt-3 border-t border-gray-200">
                <span class="inline-flex items-center text-xs bg-tea-green-100 text-tea-green-800 px-3 py-1.5 rounded-full font-semibold">
                    <i class="fas fa-users mr-1"></i>
                    {{ group.memberships.count }} Member{{ group.memberships.count|pluralize }}
                </span>
                <a href="{% url 'contract_market_place:group_detail' group.id %}"
                   class="inline-flex items-center text-tea-green-600 hover:text-tea-green-800 font-medium text-sm transition group">
                    View Details
                    <i class="fas fa-arrow-right ml-1 group-hover:translate-x-1 transition-transform"></i>
                </a>
            </div>

            <!-- Inactive Overlay -->
            {% if not group.is_active %}
            <div class="absolute inset-0 bg-gray-900 bg-opacity-10 flex items-center justify-center pointer-events-none">
                <span class="bg-gray-800 text-white px-4 py-2 rounded-lg text-sm font-bold">
                    Inactive
                </span>
            </div>
            {% endif %}
        </div>
        {% endfor %}
    </div>
    {% else %}
    <!-- Empty State -->
    <div class="bg-white rounded-xl shadow p-12 text-center">
        <div class="max-w-md mx-auto">
            <div class="inline-flex items-center justify-center w-20 h-20 rounded-full bg-tea-green-100 mb-4">
                <i class="fas fa-users text-4xl text-tea-green-400"></i>
            </div>
            <h3 class="text-xl font-bold text-gray-800 mb-2">
                {% if request.user.is_superuser or request.user.type == 'FIELD_OFFICER' %}
                    No Groups Registered Yet
                {% else %}
                    Not Part of Any Group
                {% endif %}
            </h3>
            <p class="text-gray-600 mb-6">
                {% if request.user.is_superuser or request.user.type == 'FIELD_OFFICER' %}
                    Start by registering your first farmer group to begin managing members and activities.
                {% else %}
                    Contact your field officer to be added to a farmer group and access group benefits.
                {% endif %}
            </p>
            {% if request.user.is_superuser or request.user.type == 'FIELD_OFFICER' %}
            <a href="{% url 'contract_market_place:create_group' %}"
               class="inline-flex items-center px-6 py-3 bg-tea-green-600 hover:bg-tea-green-700 text-white rounded-lg font-semibold shadow-md hover:shadow-lg transition">
                <i class="fas fa-plus mr-2"></i>
                Register First Group
            </a>
            {% endif %}
        </div>
    </div>
    {% endif %}
</div>
{% endblock %}