{{> widgets/breadcrumb/breadcrumb}}
<div class="charts-wrapper pb-2">
	<div class="row mb-0">
		<div class="col s12 m6 mb-1">
			<div class="card">
				<div class="card-content">
				   <div class="card-header d-flex justify-content-between align-items-center">
				      <h3 class="card-title">{{translation.barChart}}</h3>
				   </div>
				   <div class="card-data">
					    {{> charts/barChart }}
				   </div>
				</div>   
			</div>
		</div>
		<div class="col s12 m6 mb-1">
			<div class="card">
				<div class="card-content">
				   <div class="card-header d-flex justify-content-between align-items-center">
				      <h3 class="card-title">{{translation.lineChart}}</h3>
				   </div>
				   <div class="card-data">
					    {{> charts/lineChart }}
				   </div>
				</div>   
			</div>
		</div>
	</div>
	<div class="row mb-0 grid-wrap">
		<div class="col s12 m6 mb-1">
			<div class="card w-100">
				<div class="card-content">
				   <div class="card-header d-flex justify-content-between align-items-center">
				      <h3 class="card-title">{{translation.doughnutChart}}</h3>
				   </div>
				   <div class="card-data">
					    {{> charts/doughnutChart }}
				   </div>
				</div>   
			</div>
		</div>
		<div class="col s12 m6 mb-1">
			<div class="card w-100">
				<div class="card-content h-100 d-flex flex-direction-column justify-content-between card-spacing">
				   <div class="card-header">
				      <h3 class="card-title">{{translation.gradientLineChart}}</h3>
				   </div>
				   <div class="card-data">
				   	{{> charts/gradientLineChart}}
				   </div>
				</div>   
			</div>
		</div>
	</div>
	<div class="row mb-0">
		<div class="col s12 m6 mb-1">
			<div class="card">
				<div class="card-content">
				   <div class="card-header d-flex justify-content-between align-items-center">
				      <h3 class="card-title">{{ translation.polarAreaChart }}</h3>
				   </div>
				   <div class="card-data">
					    {{> charts/polarAreaChart }}
				   </div>
				</div>   
			</div>
		</div>
		<div class="col s12 m6 mb-1">
			<div class="card">
				<div class="card-content">
				   <div class="card-header d-flex justify-content-between align-items-center">
				      <h3 class="card-title">{{ translation.radarChart }} </h3>
				   </div>
				   <div class="card-data">
				   	{{> charts/radarChart}}
				   </div>
				</div>   
			</div>
		</div>
	</div>
</div>