{# {% extends 'base.html.twig' %} #}
{% extends "/layout/master.html.twig" %}

{% block title %}Accueil{% endblock %}
{% block css %}

{% endblock %}
{% block body %}
    <div class="container-fluid">

        <!-- Breadcrumb start -->
        <div class="row m-1">
            <div class="col-12 ">
                <h4 class="main-title">Accueil</h4>
                
            </div>
        </div>
        <!-- Breadcrumb end -->

        {# {{outils}} #}


        <!-- Vérifie si la variable outils existe avant d'afficher -->
        {% if outils is defined and outils is not empty %}
            <div class="row terms-condition-container">
                {% for outil in outils %}
                    <div class="col-lg-3 col-md-4 col-sm-6 col-12">
                        <div class="card shadow-lg p-3 mb-4 bg-white rounded">
                            <div class="card-body text-center">
                                <img src="{{ outil.image }}" alt="{{ outil.nom }}" class="mb-3 img-fluid" style="width: 100px;">
                                <h3 class="card-title">{{ outil.nom }}</h3>
                                <p class="card-text">{{ outil.description }}</p>
                                <a href="{{ outil.lien }}" class="btn btn-primary">Utiliser</a>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
        {% else %}
            <p class="alert alert-warning">Aucun outil disponible.</p>
        {% endif %}


    </div>
{% endblock %}

{% block scripts %}
<!--customizer-->
<div id="customizer"></div>

{% endblock %}