{% block body %}
	{% block stylesheets %}
		<link rel="stylesheet" href="https://unpkg.com/charts.css/dist/charts.min.css">
		<link rel="stylesheet" href="{{asset('assets/css/graphiques.css')}}">
	{% endblock %}

	<div class="wrapper-table">
		<h1>Graphiques statistiques</h1>

		{# Graphique des dépenses #}
		<div class="container-graphiques">
			<div id="graphique-depenses">
				<select name="selectAnneesDepenses" id="selectAnneesDepenses" class="btn select selectAnneesDepenses" data-select="graphique-mois-depenses">
					{% for a in selectAnneesDepenses %}
						<option value="{{a.annee}}">{{a.annee}}</option>
					{% endfor %}
				</select>
				<canvas class="graphique" id="graphDepenses" width="600" height="400"></canvas>
			</div>
			{# Graphique des recettes #}
			<div id="graphique-recettes">
				<select name="selectAnneesRecettes" id="selectAnneesRecettes" class="btn select selectAnneesRecettes" data-select="graphique-mois-recettes">
					{% for a in selectAnneesRecettes %}
						<option value="{{a.annee}}">{{a.annee}}</option>
					{% endfor %}
				</select>
				<canvas class="graphique" id="graphRecettes" width="600" height="400"></canvas>
			</div>
		</div>
	</div>
{% endblock %}

{% block javascripts %}
	<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
	<script src="{{asset('assets/js/graphique-depenses.js')}}" type="text/javascript"></script>
	<script src="{{asset('assets/js/graphique-recettes.js')}}" type="text/javascript"></script>

{% endblock %}