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

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

{% block body %}


    <div class="home-container-mobile mobile-container">
        <h1>Aux bons vents de Lure</h1>

        <div id="home-menu-mobile">
            <ul>
                <li><a href="{{ path('app_home') }}">Accueil</a></li>
                <li><a href="{{ path('categorie_list', {'id': menu.generate()[1].id }) }}">{{ menu.generate()[1].nom }}</a></li>
                <li><a href="{{ path('categorie_list', {'id': menu.generate()[2].id }) }}">{{ menu.generate()[2].nom }}</a></li>
                <li><a href="{{ path('categorie_list', {'id': menu.generate()[5].id }) }}">{{ menu.generate()[5].nom }}</a></li>
                <li><a href="{{ path('categorie_list', {'id': menu.generate()[8].id }) }}">{{ menu.generate()[8].nom }}</a></li>
                <li><a href="{{ path('categorie_list', {'id': menu.generate()[7].id }) }}">{{ menu.generate()[7].nom }}</a></li>
                <li><a href="{{ path('categorie_list', {'id': menu.generate()[6].id }) }}">{{ menu.generate()[6].nom }}</a></li>
                <li><a href="{{ path('categorie_list', {'id': menu.generate()[3].id }) }}">{{ menu.generate()[3].nom }}</a></li>
                <li><a href="{{ path('categorie_list', {'id': menu.generate()[0].id }) }}">{{ menu.generate()[0].nom }}</a></li>
                <li><a href="{{ path('app_contact') }}">contact</a></li>
                <li><a href="{{ path('app_mentions') }}">Mentions Légales</a></li>
            </ul>
            <p>CDH &copy; 2024</p>
        </div>

    </div>

    <div class="home-container" data-controller="home">
        <h1>Aux bons vents de Lure</h1>
        <div class="home">
            <div class="titre" id="titre1"><h2>{{ menu.generate()[0].nom }}</h2></div>
            <div class="titre" id="titre2"><h2>{{ menu.generate()[1].nom }}</h2></div>
            <div class="titre" id="titre3"><h2>{{ menu.generate()[2].nom }}</h2></div>
            <div class="titre" id="titre4"><h2>{{ menu.generate()[3].nom }}</h2></div>
            <div class="titre" id="titre5"><h2></h2>

                <map name="liens">
                    <area
                            shape="poly"
                            coords="180,161,203,7,225,159,213,179,204,178,190,182"
                            href="{{ path('categorie_list', {'id': menu.generate()[1].id }) }}"
                            alt="{{ menu.generate()[1].nom }}"
                            id="link1"
                    />
                    <area
                            shape="poly"
                            coords="225,161,299,107,247,180,226,193,222,185,215,179"
                            href="{{ path('categorie_list', {'id': menu.generate()[2].id }) }}"
                            alt="{{ menu.generate()[2].nom }}"
                            id="link2"
                    />
                    <area
                            shape="poly"
                            coords="249,179,399,202,245,227,225,217,230,205,226,194"
                            href="{{ path('categorie_list', {'id': menu.generate()[5].id }) }}"
                            alt="{{ menu.generate()[5].nom }}"
                            id="link5"
                    />
                    <area
                            shape="poly"
                            coords="226,216,244,229,296,298,224,246,214,226,220,222"
                            href="{{ path('categorie_list', {'id': menu.generate()[8].id }) }}"
                            alt="{{ menu.generate()[8].nom }}"
                            id="link8"
                    />
                    <area
                            shape="poly"
                            coords="189,226,201,229,213,226,225,246,200,399,178,249"
                            href="{{ path('categorie_list', {'id': menu.generate()[7].id }) }}"
                            alt="{{ menu.generate()[7].nom }}"
                            id="link7"
                    />
                    <area
                            shape="poly"
                            coords="180,215,185,221,192,226,177,249,106,297,158,225"
                            href="{{ path('categorie_list', {'id': menu.generate()[6].id }) }}"
                            alt="{{ menu.generate()[6].nom }}"
                            id="link6"
                    />
                    <area
                            shape="poly"
                            coords="161,226,5,201,157,181,179,192,178,203,180,213"
                            href="{{ path('categorie_list', {'id': menu.generate()[3].id }) }}"
                            alt="{{ menu.generate()[3].nom }}"
                            id="link3"
                    />
                    <area
                            shape="poly"
                            coords="181,191,160,179,107,106,178,159,190,181"
                            href="{{ path('categorie_list', {'id': menu.generate()[0].id }) }}"
                            alt="{{ menu.generate()[0].nom }}"
                            id="link0"
                    />
                    <area
                            shape="circle"
                            coords="203,204,26"
                            href="{{ path('app_admin_index') }}"
                            alt="Administration"
                            id="link4"
                    />
                </map>
                <img usemap="#liens" src="{{ asset('img/boussole.png') }}" alt="boussole">
            </div>

            <div class="titre" id="titre6"><h2>{{ menu.generate()[5].nom }}</h2></div>
            <div class="titre" id="titre7"><h2>{{ menu.generate()[6].nom }}</h2></div>
            <div class="titre" id="titre8"><h2>{{ menu.generate()[7].nom }}</h2></div>
            <div class="titre" id="titre9"><h2>{{ menu.generate()[8].nom }}</h2></div>


        </div>
    </div>

{% endblock %}