{% extends "base-pdf.html.twig" %}
{% block title %}Seance :
	{{ seance.seancename }}
{% endblock %}
{% block content %}
	<style>
		@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500 &display=swap');
		body {
			font-family: 'Roboto', sans-serif;
			overflow: hidden;
		}
		.bigtitle {
			font-size: 24px;
			font-weight: bolder;
			text-transform: uppercase;
			margin-bottom: 25px;

		}
		.barre {
			background-color: #ED4545;
			width: 100%;
			height: 107px;
			text-align: center;
			color: white;
			font-size: 19px;
		}

		.monlogo {
			width: 86px;
			height: 85px;
			position: absolute;
			left: 34px;
			top: 12px;
		}
		.tableau-style {
			border-collapse: collapse;
			max-width: 100%;
			width: 100%;
			border: 1px solid black;
		}

		thead th {
			padding: 10 0;
		}

		tbody tr,
		td,
		th {
			border: 1px solid black;
		}

		.smalltitle {
			padding: 0 !important;
		}

		.tableau {
			width: 65%;
			text-align: center;
			border-collapse: collapse;
			border: 2px solid black;
		}

		.tableau tr td {
			font-size: 10px;
		}
		.gauche {
			width: 200px;
			max-width: 200px;
			padding: 0 !important;
		}
		.objectif {
			min-height: 10px;
			height: 20px;
			max-height: 10px;
		}
		.but {
			min-height: 30px;
			height: 50px;
			max-height: 30px;
		}
		.consignes {
			min-height: 40px;
			height: 60px;
			max-height: 40px;
		}
		.terrain {
			width: 35%;
			height: 200px;
			float: right;
			overflow: hidden;
		}
		.flex {
			display: flex;
			width: 100%
		}
		.time {
			font-size: 13px;
			font-weight: bolder;

		}
		.small-text {
			font-size: 11px;
			font-weight: bolder;
			margin-right: 5px;
		}
		.schema {
			background-color: #88c756;
			width: 100%;
			height: 200px;
			border-radius: 2px;
		}
		.container {
			border: 1px solid black;
			padding: 5px;
		}

		.description-icon {
			font-size: 10px;
			text-align: center;
		}
	</style>
	<div class="barre">
		<img class="monlogo" src="{{ url }}assets/images/logooffi1.png" alt="logo club">
		<h1 class="bigtitle">{{ seance.seancename }}</h1>
		Date :
		{{ seance.createdAt|date('d/m/Y') }}
		{{ seance.category }}
		{{ seance.phasedejeu }}
	</div>


	<table class="tableau-style">
		<thead>
			<tr>
				<th>
					<img src="{{ url }}assets/images/exercicesicons/cage.png" alt="cage">
				</th>
				<th><img src="{{ url }}assets/images/exercicesicons/haie.png" alt="haie">
				</th>
				<th><img src="{{ url }}assets/images/exercicesicons/piquet.png" alt="piquet"></th>
				<th><img src="{{ url }}assets/images/exercicesicons/cone.png" alt="cone"></th>
				<th><img src="{{ url }}assets/images/exercicesicons/cerceaux.png" alt="cerceaux"></th>
				<th><img src="{{ url }}assets/images/exercicesicons/coupelle.png" alt="coupelles"></th>
				<th><img src="{{ url }}assets/images/exercicesicons/ballon.png" alt="ballon"></th>
				<th><img src="{{ url }}assets/images/exercicesicons/chasuble1.png" alt="chasuble bleu"></th>
				<th><img src="{{ url }}assets/images/exercicesicons/chasuble2.png" alt="chasuble vert"></th>
				<th><img src="{{ url }}assets/images/exercicesicons/chasuble3.png" alt="chasuble orange"></th>
				<th><img src="{{ url }}assets/images/exercicesicons/chasuble4.png" alt="chasuble violet"></th>
				<!-- DEPLACEMENT LEGENDE ICI -->
				<th><img src="{{ url }}assets/images/exercicesicons/deplacement.png" alt="deplacement"></th>
				<th><img src="{{ url }}assets/images/exercicesicons/conduite.png" alt="conduite"></th>
				<th><img src="{{ url }}assets/images/exercicesicons/passe.png" alt="passe/tir"></th>
			</tr>
		</thead>
		<tr>
			<td class="description-icon">cage</td>
			<td class="description-icon">haie</td>
			<td class="description-icon">piquet</td>
			<td class="description-icon">cone</td>
			<td class="description-icon">cerceaux</td>
			<td class="description-icon">coupelles</td>
			<td class="description-icon">ballon</td>
			<td class="description-icon">chasuble</td>
			<td class="description-icon">chasuble</td>
			<td class="description-icon">chasuble</td>
			<td class="description-icon">chasuble</td>
			<td class="description-icon">Déplacement</td>
			<td class="description-icon">Conduite</td>
			<td class="description-icon">Passe/tir</td>
		</tr>
		<tbody></tbody>
	</table>

	{% for exercice in exercices %}
		<div class="container">
			<div class="flex">
				<table class="tableau">
					<thead>
						<tr>
							<th class="smalltitle gauche">Objectif</th>
							<th class="smalltitle">Critères de réussite</th>
						</tr>
					</thead>
					<tr>
						<td class="objectif">{{ exercice.objectif }}</td>
						<td>{{ exercice.criteresreussite }}</td>
					</tr>
					<thead>
						<tr>
							<th class="smalltitle gauche">Buts</th>
							<th class="smalltitle">Critères de réalisation</th>
						</tr>
					</thead>
					<tr>
						<td class="but">{{ exercice.but }}</td>
						<td>{{ exercice.criteresrealisation }}</td>
					</tr>
					<thead>
						<tr>
							<th class="smalltitle gauche">Consignes</th>
							<th class="smalltitle">Variantes</th>
						</tr>
					</thead>
					<tr>
						<td class="consignes">{{ exercice.consignes }}</td>
						<td>{{ exercice.variantes }}</td>
					</tr>
				</table>
				<div class="terrain">
					<span class="time">Durée :</span>
					<span class="small-text">{{ exercice.time }}
						minutes</span>

					<span class="time">Effectif :</span>
					<span class="small-text">{{ exercice.effectif }}
						{% if exercice.effectif|length > 1 %}joueurs
						{% else %}
							joueur
						{% endif %}
					</span>
					<div class="schema">
						<img src="{{ url }}exercices/exercice-{{ exercice.id }}.jpg" style="width: 100%; max-width: 100%"/>
					</div>
				</div>
			</div>
		</div>
	{% endfor %}


{% endblock %}