<div class="alert alert-success form-inline">
            <i class="fa fa-charging-station"></i> <b>Point de charge disponible</b></div>
<div class="alert alert-warning form-inline">
               <i class="fa fa-envelope"></i> Renseigner votre adresse mail </div>
<input type="email" class="form-control" id="email" placeholder="Adresse email *" value="{% if email is defined %}{{ email }} {% endif %}"/>
<div class="alert alert-danger form-inline">
         <i class="fas fa-lock-open"></i> <b>Un code vous sera envoyé pour suivre et arreter votre charge</b>
 </div>


    


<div class="text-center mt-3 mb-3">
    <button class="btn btn-primary" id="payCharge" data-bs-toggle="modal" data-bs-target="#payModal"><i class="fa-solid fa-credit-card"></i> Payer </button>
    <button class="btn btn-primary" id="startCharge" disabled="disabled"><i class="fa-solid fa-circle-play"></i> Lancer la charge </button>
</div>


<!-- Modal -->
<div class="modal fade" id="payModal" tabindex="-1" aria-labelledby="payModalLabel" aria-hidden="true" data-controller="stripe">
    <div class="modal-dialog">
        <div class="modal-content">
            <form id="payment-form">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="exampleModalLabel">Effectuez votre autorisation de paiement</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">

                        <div id="payment-element">
                            <!-- Elements will create form elements here -->
                            <i class="fa-solid fa-circle-notch fa-spin"></i>Chargement
                        </div>
                        <div id="error-message">
                            <!-- Display error message to your customers here -->
                        </div>
                </div>
                <div class="modal-footer">
                    <button id="submit" type="submit" class="btn btn-primary">Payer</button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
                </div>
            </form>
        </div>
    </div>
</div>

