{% 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 CHARGES:
					<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">
						<!-- Añadiendo el ID único según tu solicitud, manteniendo el resto del código intacto -->
						<div id="Connecteur{{ loop.index == 2 ? 'B' : 'A' }}" class="card-body" 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 B :</h3>
								{% else %}
									<h3>Informations connecteur A :</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>
								{% if connector.currentType == 'AC' %}
									<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>
									<i class="fa-regular fa-credit-card"></i>

									<span id="parkingTimePrice-{{ connector.connectorId }}"></span>

									<br>
								{% elseif connector.currentType == 'DC' %}
									<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>

									<span id="parkingTimePrice-{{ connector.connectorId }}"></span>
								</span>

								<br>
							{% else %}
								<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>
								<span id="parkingTimePrice-{{ connector.connectorId }}"></span>

								<br>
							{% endif %}
						</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 == 'SuspendedEV' %}
								{% 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">
									Status du connecteur : Indisponible, Veuillez utiliser une autre borne.
								</div>
							{% endif %}
						</div>
					</div>
				</div>
			</div>
		{% endfor %}
	</div>
</div>{% endblock %}