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

{% block body %}



<div class="container-fluid" id="home-header">
    <div class="row justify-content-evenly">
        <div class="col-12 offset-0 col-md-8 col-lg-4 cart">
            <img src="{{ asset('img/chain.png') }}" class="img-fluid mx-auto d-block" alt="bike">
            <p class="lead">
                En vélo ou en tandem, profitez des pistes cyclabe "Véloroute Vallée de Somme" pour découvrir St-Valéry-sur-Somme et ses alentours
            </p>
            <a class="btn nav-link">En route !</a>
        </div>
        <div class="col-12 offset-0 col-md-8 col-lg-4 cart">
            <img src="{{ asset('img/rudder.png') }}" class="img-fluid mx-auto d-block" alt="boat">
            <p class="lead">
                Découvrez le canal de la somme aux commandes de votre bateau</br>
                Débarquement possible à Petit port (bisto de pays et snack) ou Abbeville
            </p>
            <a class="btn nav-link">Levez l'ancre !</a>
        </div>
    </div>
</div>

<div class="container-fluid" id="bloc">
    <div class="rows">
        <div class="col-10 offset-1 col-lg-8 offset-lg-2">
            <p class="lead text-center">
                LOCATIONS DE BATEAUX DE PROMENADE ET DE VÉLOS ÉLECTRIQUES ENTRE ST-VALERY-SUR-SOMME ET ABBEVILLE
            </p>
            <p class="text-start">
                De St-Valéry-sur-Somme à Abbeville, venez découvrir le canal de la Somme à bord de bateaux de promenade sans permis, simples à piloter, ou à vélos (électrique/VTT/VTC/TANDEM).
                A 100m du pont levis a la sortie de St-Valéry-sur-Somme en direction du Crotoy.
                Les groupes et familles sont les bienvenus.
                Ouvert toute l'année sur réservation *
                Assistance dépannage offerte sur les réservations internet (uniquement sur les pistes cyclables entre le Crotoy et Cayeux-sur-mer).
            </p>
            <p class="lead text-center">
                FERMÉ A PARTIR DU LUNDI 15 NOVEMBRE
            </p>
        </div>
    </div>
</div>

{% endblock %}

{% block javascript %}
<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
  <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-basket-fill" viewBox="0 0 16 16">
        <path d="M5.071 1.243a.5.5 0 0 1 .858.514L3.383 6h9.234L10.07 1.757a.5.5 0 1 1 .858-.514L13.783 6H15.5a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.5.5H15v5a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V9H.5a.5.5 0 0 1-.5-.5v-2A.5.5 0 0 1 .5 6h1.717L5.07 1.243zM3.5 10.5a.5.5 0 1 0-1 0v3a.5.5 0 0 0 1 0v-3zm2.5 0a.5.5 0 1 0-1 0v3a.5.5 0 0 0 1 0v-3zm2.5 0a.5.5 0 1 0-1 0v3a.5.5 0 0 0 1 0v-3zm2.5 0a.5.5 0 1 0-1 0v3a.5.5 0 0 0 1 0v-3zm2.5 0a.5.5 0 1 0-1 0v3a.5.5 0 0 0 1 0v-3z"></path>
        </svg>
      <strong class="me-auto">Mon panier</strong>
      <small>11 mins ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

<script>
    var toastTrigger = document.getElementById('liveToastBtn')
    var toastLiveExample = document.getElementById('liveToast')
    if (toastTrigger) {
        toastTrigger.addEventListener('click', function () {
            var toast = new bootstrap.Toast(toastLiveExample)

            toast.show()
        })
    }
</script>
{% endblock %}