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

{% block title %}Dashboard{% endblock %}

{% block content %}

<div class="container-fluid py-4">

    <div class="row g-4">

        <!-- 📊 COLONNE GAUCHE (Stats) -->
        <div class="col-lg-8">

            <div class="row g-4">

                <!-- Offres actives -->
                <div class="col-sm-6 col-md-4">
                    <div class="card text-black shadow-sm border-0 rounded-4 p-4 text-center" style="background-color: var(--bs-success-bg-subtle);">
                        <h5 class="fw-semibold mb-3">Offres actives</h5>
                        <div class="display-6 fw-bold">3</div>
                    </div>

                </div>

                <!-- Employés en mission -->
                <div class="col-sm-6 col-md-4">
                    <div class="card bg-white shadow-sm border-0 rounded-4 p-4 text-center">
                        <h5 class="fw-semibold mb-3">Employés en mission</h5>
                        <div class="display-6 fw-bold text-dark">14</div>
                    </div>
                </div>

                <!-- Contact à signer -->
                <div class="col-sm-6 col-md-4">
                    <div class="card text-black bg-warning bg-gradient shadow-sm border-0 rounded-4 p-4 text-center">
                        <h5 class="fw-semibold mb-3">Contrats à signer</h5>
                        <div class="display-6 fw-bold">47</div>
                    </div>
                </div>

                <!-- Candidats -->
                <div class="col-sm-6 col-md-4">
                    <div class="card text-black  bg-gradient shadow-sm border-0 rounded-4 p-4 text-center" style="background-color:var(--bs-primary-bg-subtle)">
                        <h5 class="fw-semibold mb-3">Candidats postulés</h5>
                        <div class="display-6 fw-bold">12</div>
                    </div>
                </div>

                <!-- Matching automatique -->
                <div class="col-sm-6 col-md-4">
                    <div class="card text-black bg-teal bg-gradient shadow-sm border-0 rounded-4 p-4 text-center" style="background-color:var(--bs-primary-bg-subtle)">
                        <h5 class="fw-semibold mb-3">Matching automatique</h5>
                        <div class="display-6 fw-bold">127</div>
                    </div>
                </div>

            </div>
        </div>

        <!-- 🔔 COLONNE DROITE (Notifications) -->
        <div class="col-lg-4">

            <div class="card shadow-sm rounded-4 p-4" style="max-height: 600px; overflow-y: auto;">

                <div class="d-flex justify-content-between align-items-center border-bottom pb-2 mb-3">
                    <h4 class="fw-bold text-primary">Notifications</h4>
                    <a href="#" class="text-muted small fw-medium text-decoration-none">Voir plus</a>
                </div>

                {% for i in 1..9 %}
                    <div class="border rounded-3 p-3 mb-3 d-flex justify-content-between align-items-center bg-light hover-shadow-sm">
                        <p class="mb-0 text-dark fw-medium text-truncate">
                            Notification {{ i }} : Un exemple de texte pour la notification
                        </p>
                        <span class="text-secondary small">Aujourd'hui</span>
                    </div>
                {% endfor %}

            </div>

        </div>

    </div>

</div>

{% endblock %}