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

{% block pp %}{{pp}}{% endblock %}

{% block css %}{{css}}{% endblock %}

{% block title %}Accueil - HearthTrack{% endblock %}

{% block user %}{{user}} - {{role}}{% endblock %}

{% block body %}
<div class="container-fluid px-4">
                        <h1 class="mt-4">Accueil</h1>
                        <ol class="breadcrumb mb-4">
                            <li class="breadcrumb-item active">Vue d'ensemble</li>
                        </ol>
                        <div class="row">
                            <div class="col-7">
                                <div class="card mb-4">
                                    <div class="card-header">
                                        <i class="fas fa-chart-area me-1"></i>
                                        Stastiques globales
                                    </div>
                                    <div class="card-body">
                                        {# <canvas id="myAreaChart" width="100%" height="40"></canvas> #}
                                    </div>
                                </div>
                            </div>
                            
                            <div class="col-5">
                                <div class="card mb-4">
                                    <div class="card-header">
                                        <i class="fas fa-chart-bar me-1"></i>
                                        Résumé quotidien
                                    </div>
                                    <div class="card-body">
                                        
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-5">
                                <div class="card mb-4">
                                    <div class="card-header">
                                        <i class="fas fa-chart-bar me-1"></i>
                                        Liste d'amis
                                    </div>
                                    <div class="card-body">
                                        
                                    </div>
                                </div>
                            </div>
                            <div class="col-7">
                                <div class="card mb-4">
                                    <div class="card-header">
                                        <i class="fas fa-chart-bar me-1"></i>
                                        Messagerie
                                    </div>
                                    <div class="card-body">
                                        
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
{% endblock %}