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

{% block title %}Back-Office | Tamm-Kreiz
{% endblock %}

{% block body %}

	<main class="content">
		<div class="container-fluid p-0">

			<div class="row mb-2 mb-xl-3">
				<div class="col-auto d-none d-sm-block">
					<h3>Dashboard</h3>
				</div>
			</div>
			<div class="row">
				<div class="col-12 col-sm-6 col-xxl-3 d-flex">
					<div class="card illustration flex-fill">
						<div class="card-body p-0 d-flex flex-fill">
							<div class="row g-0 w-100">
								<div class="col-6">
									<div class="illustration-text p-3 m-1">
										<h4 class="illustration-text">Welcome Back,
											{{user.firstname}}!</h4>
										<p class="mb-0">Back Office Tamm-Kreiz</p>
									</div>
								</div>
								<div class="col-6 align-self-end text-end">
									<img src="img/illustrations/customer-support.png" alt="Customer Support" class="img-fluid illustration-img">
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="col-12 col-sm-6 col-xxl-3 d-flex">
					<div class="card flex-fill">
						<div class="card-body py-4">
							<div class="d-flex align-items-start">
								<div class="flex-grow-1">
									<h3 class="mb-2">TKzistes 24.300</h3>
									<p class="mb-2">Nombre Total d'inscrits</p>
									<div class="mb-0">
										<span class="badge badge-soft-success me-2">
											+5.35%
										</span>
										<span class="text-muted">Depuis la semaine dernière</span>
									</div>
								</div>
								<div class="d-inline-block ms-3">
									<div class="stat">
										<i class="align-middle text-success" data-feather="users"></i>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="col-12 col-sm-6 col-xxl-3 d-flex">
					<div class="card flex-fill">
						<div class="card-body py-4">
							<div class="d-flex align-items-start">
								<div class="flex-grow-1">
									<h3 class="mb-2">12</h3>
									<p class="mb-2">Evènements en Attente</p>
									<div class="mb-0">
										<span class="badge badge-soft-danger me-2">
											-4.25%
										</span>
										<span class="text-muted">Depuis la semaine dernière</span>
									</div>
								</div>
								<div class="d-inline-block ms-3">
									<div class="stat">
										<i class="align-middle text-danger" data-feather="calendar"></i>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="col-12 col-sm-6 col-xxl-3 d-flex">
					<div class="card flex-fill">
						<div class="card-body py-4">
							<div class="d-flex align-items-start">
								<div class="flex-grow-1">
									<h3 class="mb-2">Adh 14.300</h3>
									<p class="mb-2">Total Adhérents</p>
									<div class="mb-0">
										<span class="badge badge-soft-success me-2">
											+8.65%
										</span>
										<span class="text-muted">Depuis l'année dernière</span>
									</div>
								</div>
								<div class="d-inline-block ms-3">
									<div class="stat">
										<i class="align-middle text-info" data-feather="user-check"></i>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="row">
				<div class="col-12 col-lg-8 d-flex">
					<div class="card flex-fill w-100">
						<div class="card-header">
							<h5 class="card-title mb-0">L'activité récente</h5>
						</div>
						<div class="card-body d-flex w-100">
							<table id="datatables-dashboard-projects" class="table table-striped my-0">
								<thead>
									<tr>
										<th>Date</th>
										<th class="d-none d-xl-table-cell">Message</th>
										<th>Status</th>
										<th class="d-none d-xl-table-cell">User</th>
									</tr>
								</thead>
								<tbody>


									{% for l in logs %}
										<tr>
											<td class="d-none d-xl-table-cell">{{l.createdAt|date("d/m/Y H:i")}}</td>
											<td>{{l.message}}</td>
											<td>
												<span class="badge {% if l.levelName =='INFO' %} bg-info {% elseif l.levelName == 'ERROR' %} bg-danger {% else %} bg-success {% endif %}">
													{{l.level}}
													{{l.levelName}}
												</span>
											</td>
											<td class="d-none d-xl-table-cell">
												{{l.extra.user.firstname}}
											</td>
										</tr>
									{% endfor %}

								</tbody>
							</table>
						</div>
					</div>
				</div>
				<div class="col-12 col-lg-4 d-flex">
					<div class="card bg-dark flex-fill w-100">
						<div class="card-header">
							<h5 class="card-title mb-0">Les dernières actu facebook</h5>
						</div>
						<div class="card-body text-center">

							<div class="fb-page w-100" data-href="https://www.facebook.com/TammKreiz" data-tabs="&#xe9;v&#xe8;nements, timeline" data-width="" data-height="" data-small-header="true" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="false">
								<blockquote cite="https://www.facebook.com/TammKreiz" class="fb-xfbml-parse-ignore">
									<a href="https://www.facebook.com/TammKreiz">Tamm-Kreiz</a>
								</blockquote>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="row">
				<div class="col-12 col-lg-3 col-xl-4 d-flex">
					<div class="card bg-dark  flex-fill w-100">
						<div class="card-header">
							<h5 class="card-title mb-0">To Do List</h5>
						</div>
						<div class="card-body">
							<ul class="timeline">
								<li class="timeline-item">
									<strong>Programmer le CA d'Avril</strong>
									<span class="float-end text-muted text-sm">30m ago</span>
									<p>Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris...</p>
								</li>
								<li class="timeline-item">
									<strong>Rappeller Monsieur Orga pour Yaouank</strong>
									<span class="float-end text-muted text-sm">2h ago</span>
									<p>Sed aliquam ultrices mauris. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent adipiscing. Phasellus ullamcorper ipsum rutrum
																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																						nunc...</p>
								</li>
								<li class="timeline-item">
									<strong>Faire une Pause Café</strong>
									<span class="float-end text-muted text-sm">3h ago</span>
									<p>Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Maecenas malesuada...</p>
								</li>
								<li class="timeline-item">
									<strong>Se former sur git</strong>
									<span class="float-end text-muted text-sm">30m ago</span>
									<p>Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum...</p>
								</li>
							</ul>
						</div>
					</div>
				</div>
				<div class="col-12 col-lg-9 col-xl-8 d-flex">
					<div class="card flex-fill">
						<div class="card-header">
							<h5 class="card-title mb-0">Log Evènements</h5>
						</div>
						<div class="card-body d-flex">
							<table id="datatables-dashboard-projects" class="table table-stripped my-0">
								<thead>
									<tr>
										<th>Date</th>
										<th class="d-none d-xl-table-cell">Message</th>
										<th>Status</th>
										<th class="d-none d-xl-table-cell">User</th>
									</tr>
								</thead>
								<tbody>


									{% for l in logsEvent %}
										<tr>
											<td class="d-none d-xl-table-cell">{{l.createdAt|date("d/m/Y H:i")}}</td>
											<td>{{l.message}}</td>
											<td>
												<span class="badge {% if l.levelName =='INFO' %} bg-info {% elseif l.levelName == 'ERROR' %} bg-danger {% else %} bg-success {% endif %}">
													{{l.level}}
													{{l.levelName}}
												</span>
											</td>
											<td class="d-none d-xl-table-cell">
												{% if l.extra.user.firstname is defined %}
													{{l.extra.user.firstname}}
												{% else %}
													anonymous
												{% endif %}
											</td>
										</tr>
									{% endfor %}

								</tbody>
							</table>
						</div>
					</div>
				</div>


			</div>


		</div>
	</main>

	<script async defer crossorigin="anonymous" src="https://connect.facebook.net/fr_FR/sdk.js#xfbml=1&version=v12.0" nonce="0dECfI0K"></script>
{% endblock %}