{% extends 'base.html' %}
{% load humanize %}
{% block title %}Dashbodi Yangu - Viongozi{% endblock %}

{% block content %}
<style>
    .dashboard-header {
        background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
        color: var(--white);
        padding: 2rem 1rem;
        text-align: center;
        margin-bottom: 2rem;
    }
    
    .dashboard-header h1 {
        font-size: 1.8rem;
        margin-bottom: 0.5rem;
    }
    
    .groups-grid {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 1rem;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        gap: 1.5rem;
    }
    
    .group-card {
        background: var(--white);
        border-radius: 1rem;
        overflow: hidden;
        box-shadow: 0 2px 10px rgba(0,0,0,0.08);
        transition: all 0.3s ease;
    }
    
    .group-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    }
    
    .group-header {
        background: var(--primary);
        color: var(--white);
        padding: 1.2rem;
        text-align: center;
    }
    
    .group-header h3 {
        font-size: 1.3rem;
        margin-bottom: 0.3rem;
    }
    
    .group-header p {
        font-size: 0.8rem;
        opacity: 0.9;
    }
    
    .group-stats {
        padding: 1.2rem;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
        background: #FAFAFA;
    }
    
    .stat {
        text-align: center;
    }
    
    .stat .number {
        font-size: 1.3rem;
        font-weight: 700;
        color: var(--primary);
    }
    
    .stat .label {
        font-size: 0.7rem;
        color: var(--gray);
    }
    
    .group-actions {
        padding: 1rem;
        display: flex;
        gap: 0.5rem;
        border-top: 1px solid var(--light-gray);
    }
    
    .group-actions a {
        flex: 1;
        text-align: center;
        padding: 0.5rem;
        border-radius: 0.5rem;
        text-decoration: none;
        font-size: 0.8rem;
        font-weight: 500;
    }
    
    .btn-view {
        background: var(--primary);
        color: var(--white);
    }
    
    .btn-view:hover {
        background: var(--primary-dark);
    }
    
    .create-group {
        max-width: 1200px;
        margin: 2rem auto;
        padding: 0 1rem;
        text-align: center;
    }
    
    .btn-create {
        background: var(--success);
        color: var(--white);
        padding: 0.8rem 2rem;
        font-size: 1rem;
    }
    
    .btn-create:hover {
        background: #0EA5E9;
        transform: translateY(-2px);
    }
    
    .empty-state {
        text-align: center;
        padding: 3rem;
        background: var(--white);
        border-radius: 1rem;
        margin: 2rem;
    }
</style>

<div class="dashboard-header">
    <h1><i class="fas fa-tachometer-alt"></i> Karibu, {{ user.get_full_name|default:user.phone_number }}</h1>
    <p>Simamia vikundi vyako kwa urahisi</p>
</div>

{% if groups_data %}
<div class="groups-grid">
    {% for data in groups_data %}
    <div class="group-card">
        <div class="group-header">
            <h3><i class="fas fa-users"></i> {{ data.group.name }}</h3>
            <p>Wewe ni: {{ data.position.name }}</p>
        </div>
        <div class="group-stats">
            <div class="stat">
                <div class="number">{{ data.members_count }}</div>
                <div class="label">Wanachama</div>
            </div>
            <div class="stat">
                <div class="number">Tsh {{ data.current_balance|intcomma|default:"0" }}</div>
                <div class="label">Salio</div>
            </div>
            <div class="stat">
                <div class="number">Tsh {{ data.total_contributions|intcomma|default:"0" }}</div>
                <div class="label">Michango</div>
            </div>
            <div class="stat">
                <div class="number">Tsh {{ data.total_disbursements|intcomma|default:"0" }}</div>
                <div class="label">Misaada</div>
            </div>
        </div>
        <div class="group-actions">
            <a href="{% url 'group_detail' data.group.id %}" class="btn-view">
                <i class="fas fa-eye"></i> Simamia
            </a>
        </div>
    </div>
    {% endfor %}
</div>
{% else %}
<div class="empty-state">
    <i class="fas fa-folder-open" style="font-size: 4rem; color: var(--primary);"></i>
    <h3 style="margin: 1rem 0;">Huna kikundi chochote</h3>
    <p>Anzisha kikundi chako cha kwanza kuanza kusimamia wanachama</p>
    <a href="{% url 'create_group' %}" class="btn-create" style="display: inline-block; margin-top: 1rem;">
        <i class="fas fa-plus-circle"></i> Anzisha Kikundi Kipya
    </a>
</div>
{% endif %}

{% if groups_data %}
<div class="create-group">
    <a href="{% url 'create_group' %}" class="btn-create">
        <i class="fas fa-plus-circle"></i> Anzisha Kikundi Kipya
    </a>
</div>
{% endif %}
{% endblock %}