{% extends 'base.html' %}
{% load static %}

{% block content %}
<section class="hero-section">
    <div class="container text-center">
        <h1 class="display-4 mb-4">Voter Campaign CRM</h1>
        <p class="lead mb-5">Identify, Engaged, and Activate your base with a 360-degree voter view.</p>
        
        <div class="row justify-content-center">
            <div class="col-md-8">
                <form action="{% url 'index' %}" method="GET" class="search-glass">
                    <div class="input-group input-group-lg">
                        <input type="text" name="q" class="form-control border-0" placeholder="Search by name or Voter ID..." value="{{ query|default:'' }}">
                        <button class="btn btn-primary" type="submit">Search</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>

<div class="container py-5">
    <!-- Stats Row -->
    <div class="row mb-5">
        <div class="col-md-4">
            <div class="card stat-card p-4">
                <h5 class="text-muted">Total Voters</h5>
                <h2 class="mb-0">{{ stats.total_voters }}</h2>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card stat-card p-4" style="border-left-color: var(--emerald-accent);">
                <h5 class="text-muted">Active Support</h5>
                <h2 class="mb-0">{{ stats.supporters }}</h2>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card stat-card p-4" style="border-left-color: #F59E0B;">
                <h5 class="text-muted">Yard Signs</h5>
                <h2 class="mb-0">{{ stats.yard_signs }}</h2>
            </div>
        </div>
    </div>

    <!-- Voter List -->
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h2 class="h3">{% if query %}Search Results{% else %}Recent Voters{% endif %}</h2>
                <a href="/admin/core/voter/add/" class="btn btn-outline-primary btn-sm">+ Add New Voter</a>
            </div>
            
            {% if voters %}
                <div class="row g-4">
                    {% for voter in voters %}
                    <div class="col-md-6 col-lg-4">
                        <div class="card h-100 p-3">
                            <div class="d-flex justify-content-between">
                                <div>
                                    <h5 class="mb-1">{{ voter.first_name }} {{ voter.last_name }}</h5>
                                    <p class="text-muted small mb-2">ID: {{ voter.voter_id }}</p>
                                </div>
                                <div>
                                    <span class="badge {% if voter.candidate_support == 'supporting' %}bg-success{% elif voter.candidate_support == 'not_supporting' %}bg-danger{% else %}bg-secondary{% endif %}">
                                        {{ voter.get_candidate_support_display }}
                                    </span>
                                </div>
                            </div>
                            <div class="small mb-3">
                                <i class="bi bi-geo-alt"></i> {{ voter.address|truncatechars:40 }}
                            </div>
                            <div class="mt-auto">
                                <a href="{{ voter.get_absolute_url }}" class="btn btn-light w-100 btn-sm">View 360° Profile</a>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            {% else %}
                <div class="text-center py-5">
                    <p class="text-muted">No voters found. Try a different search or add a new one.</p>
                </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}
