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

{% block title %}LODMI
{% endblock %}

{% block body %}
	{% include '_partials/_navbar.html.twig' %}
	<div class="container">
		<div class="row">

			<div class="text-center">

				<br>
				<h1>IDENTIFIANT DU POINT DE CHARGEF:
					<b>{{ borne.id }}</b>
				</h1>

			</div>

		</div>
		<div class="row d-flex justify-content-lg-center">
			{% for connector in borne.connectors %}
				<div class="col-12 col-md-6 col-lg-6 mt-3 mb-3">
					<div class="card">
						<div id="borneDiv" data-controller="borne" data-borne-id-value="{{ borne.id }}" data-borne-connectorid-value="{{ connector.connectorId }}" data-borne-tagid-value="{{ connector.currentTagID }}" data-borne-visualtagid-value="{{ connector.connectorId }}">
							<div class="alert alert-info mt-3">
								{% if loop.index == 2 %}
									<h3>Informations connecteur 2 :</h3>
								{% else %}
									<h3>Informations connecteur :</h3>
								{% endif %}
								<i class="fa-solid fa-circle-info"></i>
								Référence connecteur :
								<span>{{ connector.currentTagID }}</span><br>
								<hr>
								<i class="fa-solid fa-bolt"></i>
								Puissance du chargeur :
								{{ connector.power /1000 }}
								KW<br>
								<i class="fa-solid fa-bolt"></i>
								Type de connecteur:
								{{ connector.type }}<br>
							</div>
							<div class="alert alert-info mt-3">
								<h3>
									<i class="fa-regular fa-credit-card"></i>
									Tarif (€ TTC)
								</h3>
								<hr>
								<i class="fa-regular fa-credit-card"></i>
								Prix de session :
								<span id="flatPrice-{{ connector.connectorId }}">
									<i class="fa-solid fa-circle-notch fa-spin"></i>
								</span><br>
								<i class="fa-regular fa-credit-card"></i>
								Prix Kwh consommé :
								<span id="energyPrice-{{ connector.connectorId }}">
									<i class="fa-solid fa-circle-notch fa-spin"></i>
								</span><br>
							</div>

							<div id="borneBottom">
								{% if connector.status == 'Available' %}
									{% include 'borne/_borne_start.html.twig' %}
								{% elseif connector.status == 'Preparing' %}
									<div class="form-inline alert alert-warning">
										<i class="fas fa-exclamation-triangle"></i>
										<b>Chargeur bien branché, Veuillez lancer la charge</b>
									</div>
									{% include 'borne/_borne_start.html.twig' %}
								{% elseif connector.status == 'Charging' %}
									{% include 'borne/_borne_charging.html.twig' %}
								{% elseif connector.status == 'Finishing' %}
									{% include 'borne/_borne_start.html.twig' %}
								{% elseif connector.status == 'Unavailable' %}
									<div class="alert alert-danger form-inline">
										<i class="fa-solid fa-charging-station"></i>
										Status du connecteur : Indisponible, Veuillez utiliser une autre borne
									</div>
									{% include 'borne/_borne_charging_no.html.twig' %}
								{% else %}
									<!-- Opcional: manejar cualquier otro estado no definido -->
									<div class="alert alert-info">
										Estado desconocido. Por favor, consulte con soporte.
									</div>
								{% endif %}
							</div>
						</div>
					</div>
				</div>
			{% endfor %}
		</div>
	</div>
{% endblock %}
