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

{% block body %}
    <h1>H1 Hello World</h1>
    <h2>H2 Hello World</h2>
    <h3>H3 Hello World</h3>
    <h4>H4 Hello World</h4>
    <h5>H5 Hello World</h5>
    <h6>H6 Hello World</h6>
    <p>P Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        Ad consectetur consequuntur culpa debitis dignissimos
        dolore est ex illo iure maxime, molestiae pariatur recusandae,
        reiciendis saepe similique temporibus voluptatum? Eos,
        repudiandae!
    </p>
    <a href="">A Link</a>
    <button>Button</button>
    <input type="text">
    <input type="checkbox" name="" id="">
    <button id="dropdownButton" data-dropdown-toggle="dropdownMenu" class="shadow" type="button">
        Select an option
    </button>
    <ul id="dropdownMenu" class="hidden border-red-300 shadow">
        <li>
            <a href="#" class="block hover:bg-red-500" data-value="1">Option 1</a>
        </li>
        <li>
            <a href="#" class="block hover:bg-green-500" data-value="2">Option 2</a>
        </li>
        <li>
            <a href="#" class="block hover:bg-blue-500" data-value="3">Option 3</a>
        </li>
    </ul>
    <script>
        document.querySelectorAll('#dropdownMenu a').forEach(function (option) {
            option.addEventListener('click', function (event) {
                event.preventDefault();
                console.log(this.dataset.value);
                document.getElementById('dropdownButton').textContent = this.textContent;
                console.log('close');
                document.getElementById('dropdownMenu').classList.add('hidden');
            });
        });

        document.getElementById('dropdownButton').addEventListener('click', function () {
            let menu = document.getElementById('dropdownMenu');
            console.log('open', menu);
            menu.classList.remove('hidden');
            console.log('open2', menu);
        });
    </script>

{% endblock %}