{% extends 'base.html.twig' %}

{% block title %}Projets - Village de Menotey{% endblock %}

{% block body %}
<!-- Hero Section -->
<section class="hero">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-8 mx-auto text-center">
                <h1>Nos Projets</h1>
                <p class="lead">Découvrez les projets qui façonnent l'avenir de Menotey</p>
            </div>
        </div>
    </div>
</section>

<!-- Current Projects Section -->
<section class="section">
    <div class="container">
        <div class="section-title">
            <h2>Projets en cours</h2>
            <p>Les réalisations actuellement en développement</p>
        </div>
        
        <div class="row g-4">
            {% for project in ongoing_projects %}
            <div class="col-lg-6">
                <div class="card h-100">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-start mb-3">
                            <h5 class="card-title">{{ project.title }}</h5>
                            <span class="badge bg-warning">En cours</span>
                        </div>
                        
                        <p class="card-text">{{ project.description }}</p>
                        
                        <div class="row mb-3">
                            <div class="col-6">
                                <small class="text-muted">Budget</small>
                                <p class="mb-0 fw-bold text-primary">{{ project.budget }}</p>
                            </div>
                            <div class="col-6">
                                <small class="text-muted">Fin prévue</small>
                                <p class="mb-0 fw-bold">{{ project.end_date }}</p>
                            </div>
                        </div>
                        
                        <div class="mb-3">
                            <div class="d-flex justify-content-between align-items-center mb-1">
                                <small class="text-muted">Avancement</small>
                                <small class="text-muted">{{ project.completion }}%</small>
                            </div>
                            <div class="progress">
                                <div class="progress-bar bg-success" role="progressbar" 
                                     style="width: {{ project.completion }}%" 
                                     aria-valuenow="{{ project.completion }}" 
                                     aria-valuemin="0" 
                                     aria-valuemax="100">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</section>

<!-- Future Projects Section -->
<section class="section bg-light">
    <div class="container">
        <div class="section-title">
            <h2>Projets à venir</h2>
            <p>Les futures réalisations pour améliorer notre village</p>
        </div>
        
        <div class="row g-4">
            {% for project in future_projects %}
            <div class="col-lg-6">
                <div class="card h-100 border-0 shadow-sm">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-start mb-3">
                            <h5 class="card-title">{{ project.title }}</h5>
                            <span class="badge bg-info">Planifié</span>
                        </div>
                        
                        <p class="card-text">{{ project.description }}</p>
                        
                        <div class="row">
                            <div class="col-6">
                                <small class="text-muted">Budget estimé</small>
                                <p class="mb-0 fw-bold text-primary">{{ project.budget }}</p>
                            </div>
                            <div class="col-6">
                                <small class="text-muted">Début prévu</small>
                                <p class="mb-0 fw-bold">{{ project.start_date }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</section>

<!-- Investment Section -->
<section class="section">
    <div class="container">
        <div class="section-title">
            <h2>Investissements communaux</h2>
            <p>Vue d'ensemble des investissements pour le développement du village</p>
        </div>
        
        <div class="row g-4">
            <div class="col-md-3">
                <div class="card text-center border-0">
                    <div class="card-body">
                        <i class="fas fa-euro-sign fa-3x text-success mb-3"></i>
                        <h4 class="text-success">385 000 €</h4>
                        <p class="text-muted">Budget total projets</p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-3">
                <div class="card text-center border-0">
                    <div class="card-body">
                        <i class="fas fa-chart-line fa-3x text-primary mb-3"></i>
                        <h4 class="text-primary">6</h4>
                        <p class="text-muted">Projets actifs</p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-3">
                <div class="card text-center border-0">
                    <div class="card-body">
                        <i class="fas fa-users fa-3x text-warning mb-3"></i>
                        <h4 class="text-warning">450</h4>
                        <p class="text-muted">Habitants concernés</p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-3">
                <div class="card text-center border-0">
                    <div class="card-body">
                        <i class="fas fa-calendar fa-3x text-info mb-3"></i>
                        <h4 class="text-info">2025</h4>
                        <p class="text-muted">Horizon de réalisation</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Participation Section -->
<section class="section bg-primary text-white">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-8">
                <h2 class="mb-3">Participez aux projets</h2>
                <p class="lead mb-0">Votre avis compte ! Participez aux réunions publiques et donnez votre opinion sur les projets qui vous concernent.</p>
            </div>
            <div class="col-lg-4 text-end">
                <a href="{{ path('app_contact') }}" class="btn btn-light btn-lg">
                    <i class="fas fa-comments"></i> Nous contacter
                </a>
            </div>
        </div>
    </div>
</section>

<!-- Timeline Section -->
<section class="section">
    <div class="container">
        <div class="section-title">
            <h2>Chronologie des réalisations</h2>
            <p>Les projets récemment achevés</p>
        </div>
        
        <div class="row">
            <div class="col-lg-8 mx-auto">
                <div class="timeline">
                    <div class="timeline-item">
                        <div class="timeline-marker bg-success"></div>
                        <div class="timeline-content">
                            <h6 class="text-success">2024 - Achevé</h6>
                            <h5>Nouvelle aire de jeux</h5>
                            <p>Installation d'une aire de jeux moderne et sécurisée près de l'école, adaptée aux enfants de 3 à 12 ans.</p>
                        </div>
                    </div>
                    
                    <div class="timeline-item">
                        <div class="timeline-marker bg-success"></div>
                        <div class="timeline-content">
                            <h6 class="text-success">2023 - Achevé</h6>
                            <h5>Réfection de la voirie</h5>
                            <p>Rénovation complète de la rue principale avec création de trottoirs et amélioration de l'éclairage public.</p>
                        </div>
                    </div>
                    
                    <div class="timeline-item">
                        <div class="timeline-marker bg-success"></div>
                        <div class="timeline-content">
                            <h6 class="text-success">2022 - Achevé</h6>
                            <h5>Extension de la salle des fêtes</h5>
                            <p>Agrandissement de la salle des fêtes pour accueillir plus d'événements communautaires.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<style>
.timeline {
    position: relative;
    padding-left: 30px;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #dee2e6;
}

.timeline-item {
    position: relative;
    margin-bottom: 30px;
}

.timeline-marker {
    position: absolute;
    left: -23px;
    top: 5px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 3px solid white;
    box-shadow: 0 0 0 3px #dee2e6;
}

.timeline-content {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
</style>
{% endblock %}