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

{% block title %}
    {{ parent() }} Accueil
{% endblock %}

{% block body %}
    <div class="Carrousel-Container">
        <a href="#"><img id="carousel-image" src="image-animaux/Gecko.jpg" alt="Animal"></a>

        <div class="Radio-Container">
            <input type="radio" name="Animaux" value="Gecko.jpg" id="radio1" class="radio" checked>
            <input type="radio" name="Animaux" value="Lion.jpg" id="radio2" class="radio">
            <input type="radio" name="Animaux" value="Loup.jpg" id="radio3" class="radio">
            <input type="radio" name="Animaux" value="Penguins.jpg" id="radio4" class="radio">
            <input type="radio" name="Animaux" value="Koala.jpg" id="radio5" class="radio">
        </div>
    </div>

    <script>
        const radios = document.querySelectorAll('input[name="Animaux"]');
        const image = document.getElementById('carousel-image');

        radios.forEach(radio => {
            radio.addEventListener('change', () => {
                const newSrc = 'image-animaux/' + radio.value;
                image.setAttribute('src', newSrc);
            });
        });

		
    </script>
{% endblock %}