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

{% block title %}Temps de jeu
{% endblock %}
{% block stylesheets %}
	{{parent()}}
	<link rel="stylesheet" href="{{ asset('assets/css/tempsDeJeu.css?v=<?= time() ?>')}}"/>
{% endblock %}
{% block body %}
	{% include 'entraineur/chooseTeam.html.twig' %}
	<div class="">
		<div class="col-md-12 jc-c">
			<h4>Création de Match :</h4>
		</div>
		<div class="col-md-12 jc-c">
			<svg xmlns="http://www.w3.org/2000/svg" width="412" height="4" viewbox="0 0 412 4" fill="none">
				<path d="M2 1.67349L409.506 1.67349" stroke="#1E1E1E" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
			</svg>
		</div>
		<div class="jc-c">
			<label for="libelle-match">Libelle du match :
			</label>
			<input id="libelle-match" type="text" class="input-match form-control"/>
			<label for="date-match">Date du match:
			</label>
			<input id="date-match" type="date" class="input-match form-control"/>

			<button class="btn btn-primary hide" id="btn-create-match">Création du match</button>
		</div>
	</div>

	<div class="col-md-12 jc-c">
		<h4>Temps de jeu :</h4>
	</div>
	<div class="col-md-12 jc-c">
		<svg xmlns="http://www.w3.org/2000/svg" width="412" height="4" viewbox="0 0 412 4" fill="none">
			<path d="M2 1.67349L409.506 1.67349" stroke="#1E1E1E" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
		</svg>
	</div>
	<div class="jc-c">
		<label for="liste-match">Choisir un match :</label>
		<select id="liste-match" class="form-select">
			<option>Choisir...</option>
			{% for match in listeMatch %}
				<option value="{{match.idMatch}}">{{match.libelleMatch}}
					{{match.dateMatch|date('j/m/Y')}}
					-
					{{match.nom}}</option>
			{% endfor %}
		</select>
		<label for="liste-joueurs">Choisir un joueur :</label>
		<select id="liste-joueurs" class="form-select">
			<option>Choisir...</option>
			{% for joueur in listeJoueur %}
				<option value="{{joueur.email}}" nomprenom="{{joueur.prenom}} {{joueur.nom}}">{{joueur.prenom}}
					{{joueur.nom}}</option>
			{% endfor %}
		</select>
	</div>


	<div class="jc-c container" id="reponseAjax"></div>
{% endblock %}
{% block javascripts %}
	{{ parent() }}
	<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
	<script type="text/javascript" src="{{ asset('assets/js/tempsDeJeu/initTempsDeJeu.js?v=<?= time() ?>') }}"></script>
	<script type="text/javascript" src="{{ asset('assets/js/tempsDeJeu/tempsDeJeu.js?v=<?= time() ?>') }}"></script>
	<script type="text/javascript" src="{{ asset('assets/js/tempsDeJeu/ajaxTempsDeJeu.js?v=<?= time() ?>') }}"></script>
{% endblock %}