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

{% block title %}Hello !{% endblock %}

{% block body %}
    <style>
        .example-wrapper {
            margin: 1em auto;
            max-width: 800px;
            width: 95%;
            font: 18px/1.5 sans-serif;
        }

        .example-wrapper code {
            background: #F5F5F5;
            padding: 2px 6px;
        }
    </style>

    <div class="example-wrapper">
        <h1>Hello ! ✅</h1>
        <fieldset>

            <h2>
                Catégories
            </h2>
            {% for c in categories %}
                <h3>{{ c.name }}</h3>
                {% for p in c.products %}
                    <button class="btn btn-default">
                        {{ p.name }}
                    </button>
                {% endfor %}
            {% endfor %}

        </fieldset>
        <footer>

            This friendly message is coming from:
            <ul>
                <li>Your controller at <code>src/Controller/ProductController.php</code></li>
                <li>Your template at <code>templates/product/index.html.twig</code></li>
            </ul>
        </footer>
    </div>
{% endblock %}