{# @var ea \EasyCorp\Bundle\EasyAdminBundle\Context\AdminContext #}
{% extends '@EasyAdmin/page/content.html.twig' %}

{% block page_title 'Tableau de bord' %}

{% block page_content %}
	<style>


		h2,
		h5,
		.h2,
		.h5 {
			font-family: inherit;
			font-weight: 600;
			line-height: 1.5;
			margin-bottom: 0.5rem;
			color: #32325d;
		}

		h5,
		.h5 {
			font-size: 0.8125rem;
		}

		@media(min-width: 992px) {

			.col-lg-6 {
				max-width: 50%;
				flex: 0 0 50%;
			}
		}

		@media(min-width: 1200px) {

			.col-xl-3 {
				max-width: 25%;
				flex: 0 0 25%;
			}

			.col-xl-6 {
				max-width: 50%;
				flex: 0 0 50%;
			}
		}


		.bg-danger {
			background-color: #f5365c !important;
		}


		@media(min-width: 1200px) {

			.justify-content-xl-between {
				justify-content: space-between !important;
			}
		}


		.pt-5 {
			padding-top: 3rem !important;
		}

		.pb-8 {
			padding-bottom: 8rem !important;
		}

		@media(min-width: 768px) {

			.pt-md-8 {
				padding-top: 8rem !important;
			}
		}

		@media(min-width: 1200px) {

			.mb-xl-0 {
				margin-bottom: 0 !important;
			}
		}


		.font-weight-bold {
			font-weight: 600 !important;
		}


		a.text-success:hover,
		a.text-success:focus {
			color: #24a46d !important;
		}

		.text-warning {
			color: #fb6340 !important;
		}

		a.text-warning:hover,
		a.text-warning:focus {
			color: #fa3a0e !important;
		}

		.text-danger {
			color: #f5365c !important;
		}

		a.text-danger:hover,
		a.text-danger:focus {
			color: #ec0c38 !important;
		}

		.text-white {
			color: #fff !important;
		}

		a.text-white:hover,
		a.text-white:focus {
			color: #e6e6e6 !important;
		}

		.text-muted {
			color: #8898aa !important;
		}

		@media print {
			*,
			*::before,
			*::after {
				box-shadow: none !important;
				text-shadow: none !important;
			}

			a:not(.btn) {
				text-decoration: underline;
			}

			p,
			h2 {
				orphans: 3;
				widows: 3;
			}

			h2 {
				page-break-after: avoid;
			}

			@ page {
				size: a3;
			}

			body {
				min-width: 992px !important;
			}
		}

		figcaption,
		main {
			display: block;
		}

		main {
			overflow: hidden;
		}

		.bg-yellow {
			background-color: #ffd600 !important;
		}


		.icon {
			width: 3rem;
			height: 3rem;
		}

		.icon i {
			font-size: 1.2rem;
		}

		.icon-shape {
			display: inline-flex;
			padding: 12px;
			text-align: center;
			border-radius: 50%;
			align-items: center;
			justify-content: center;
		}
	</style>


	<div class="main-content">
		<div class="header bg-gradient-primary pb-8">
			<div class="container-fluid">
				<div class="header-body">
					<div class="row">
						<div class="col-xl-3 col-lg-6">
							<div class="card card-stats mb-4 mb-xl-0">
								<div class="card-body">
									<div class="row">
										<div class="col">
											<h5 class="card-title text-uppercase text-muted mb-0">Traffic</h5>
											<span class="h2 font-weight-bold mb-0">350,897</span>
										</div>
										<div class="col-auto">
											<div class="icon icon-shape bg-danger text-white rounded-circle shadow">
												<i class="fas fa-chart-bar"></i>
											</div>
										</div>
									</div>
									<p class="mt-3 mb-0 text-muted text-sm">
										<span class="text-success mr-2">
											<i class="fa fa-arrow-up"></i>
											3.48%</span>
										<span class="text-nowrap">Since last month</span>
									</p>
								</div>
							</div>
						</div>
						<div class="col-xl-3 col-lg-6">
							<div class="card card-stats mb-4 mb-xl-0">
								<div class="card-body">
									<div class="row">
										<div class="col">
											<h5 class="card-title text-uppercase text-muted mb-0">New users</h5>
											<span class="h2 font-weight-bold mb-0">2,356</span>
										</div>
										<div class="col-auto">
											<div class="icon icon-shape bg-warning text-white rounded-circle shadow">
												<i class="fas fa-chart-pie"></i>
											</div>
										</div>
									</div>
									<p class="mt-3 mb-0 text-muted text-sm">
										<span class="text-danger mr-2">
											<i class="fas fa-arrow-down"></i>
											3.48%</span>
										<span class="text-nowrap">Since last week</span>
									</p>
								</div>
							</div>
						</div>
						<div class="col-xl-3 col-lg-6">
							<div class="card card-stats mb-4 mb-xl-0">
								<div class="card-body">
									<div class="row">
										<div class="col">
											<h5 class="card-title text-uppercase text-muted mb-0">Sales</h5>
											<span class="h2 font-weight-bold mb-0">924</span>
										</div>
										<div class="col-auto">
											<div class="icon icon-shape bg-yellow text-white rounded-circle shadow">
												<i class="fas fa-users"></i>
											</div>
										</div>
									</div>
									<p class="mt-3 mb-0 text-muted text-sm">
										<span class="text-warning mr-2">
											<i class="fas fa-arrow-down"></i>
											1.10%</span>
										<span class="text-nowrap">Since yesterday</span>
									</p>
								</div>
							</div>
						</div>
						<div class="col-xl-3 col-lg-6">
							<div class="card card-stats mb-4 mb-xl-0">
								<div class="card-body">
									<div class="row">
										<div class="col">
											<h5 class="card-title text-uppercase text-muted mb-0">Performance</h5>
											<span class="h2 font-weight-bold mb-0">49,65%</span>
										</div>
										<div class="col-auto">
											<div class="icon icon-shape bg-info text-white rounded-circle shadow">
												<i class="fas fa-percent"></i>
											</div>
										</div>
									</div>
									<p class="mt-3 mb-0 text-muted text-sm">
										<span class="text-success mr-2">
											<i class="fas fa-arrow-up"></i>
											12%</span>
										<span class="text-nowrap">Since last month</span>
									</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- Page content -->
	</div>


{% endblock %}
