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

{% block title %}Equipes
{% endblock %}
{% block stylesheets %}
	{{parent()}}
	<link rel="stylesheet" href="{{ asset('assets/css/equipes.css?v=<?= time() ?>') }}"/>
{% endblock %}

{% block body %}

	{{parent()}}
	<div id="popupContainer" class="popup">
		<div class="popup-content" class="popup">
			<div class="entete-pop-up" id="entete-pop-up">
				<div id="container-libelle-groupe"></div>
				<div id="popup-close-button" class="btn btn-danger popup-close-button">
					<i class="fas fa-times"></i>
				</div>
			</div>
			<div id="content-popup"></div>
		</div>
	</div>
	<div id="main" class="col-md-9 row row">

		<div class="col-md-3">
			<label for="equipe">Equipe :
			</label>
			<select id="equipe" class="form-select">
				{% for equipe in allEquipes %}
					<option value="{{equipe.id }}" libelle="{{equipe.nom}}">{{equipe.nom }}
					</option>
				{% endfor %}
			</select>
			<fieldset id="encadre-all-groupes">
				<legend id="legend-liste-equipe">Tous les groupes</legend>
				{% if allEquipes|length == 0 %}
					<div>Aucun groupe</div>
				{% endif %}
				{% if allEquipes|length > 0 %}
					{% for groupe in allGroups %}
						<div id="draggable-{{groupe.id}}" idgroupe="{{groupe.id}}" draggable="true" class="groupe draggable">{{groupe.libelle}}</div>
					{% endfor  %}
				{% endif  %}

			</fieldset>
		</div>
		<fieldset class="col-md-9 row drop" id="encadre-liste-equipe">

			{% if allEquipes|length == 0 %}
				<legend id="legend-liste-equipe">Groupes de l'équipe
					{{allEquipes[0]["libelle"] }}</legend>
				<div>Aucune équipe</div>
			{% endif %}
			{% if allEquipes|length > 0 %}
				{% include 'entraineur/equipes/listeGroupes.html.twig' %}
			{% endif  %}

		</fieldset>
	</div>

{% endblock %}
{% block javascripts %}
	{{parent()}}
	<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
	<script type="text/javascript" src="{{ asset('assets/js/equipe/initEquipe.js?v=<?= time() ?>') }}"></script>
	<script type="text/javascript" src="{{ asset('assets/js/equipe/equipe.js?v=<?= time() ?>') }}"></script>
	<script type="text/javascript" src="{{ asset('assets/js/equipe/ajaxEquipe.js?v=<?= time() ?>') }}"></script>
{% endblock %}