{% block body %}
    <h1 class="fs-1">Probleme index</h1>
    <a href="{{ path('probleme_new') }}" class="btn btn-success">Créer</a>

    {% for cat in categories %}
        <div class="d-flex align-items-center">
            {{ cat.image.display(100) }}
            <div class="fs-3">{{ cat }} ({{ cat.problemes | length }})</div>
        </div>

        <div class="mx-5">
            <table class="table table-striped">
                <thead>
                <tr>
                    <th>Id</th>
                    <th></th>
                    <th>Name</th>
                    <th>actions</th>
                </tr>
                </thead>
                <tbody>
                {% for probleme in cat.problemes %}
                    <tr id="pb_{{ probleme.id }}">
                        <td>{{ probleme.id }}</td>
                        <td> {{ probleme.image != null ? probleme.image.display(70) : '' }}</td>
                        <td>{{ probleme.name }}</td>
                        <td>
                            <div class="d-flex align-items-center"><a
                                        href="{{ path('probleme_show', {'id': probleme.id}) }}"
                                        class="btn btn-dark">Voir</a>
                                <a href="{{ path('probleme_edit', {'id': probleme.id}) }}" class="btn btn-info mx-3">Modifier</a>
                                <a href="{{ path('probleme_add',{'id':probleme.id}) }}" class="btn btn-success">Ajouter</a>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td colspan="4">
    {% if probleme.sousProbleme is not empty %}
        <table class="table table-striped">
            <thead>
            <tr>
                <th>Id</th>
                <th></th>
                <th>Name</th>
                <th>actions</th>
            </tr>
            </thead>
            <tbody>
            {% for item in probleme.sousProbleme %}
                <tr id="pb_{{ item.id }}">
                    <td>{{ item.id }}</td>
                    <td> {{ item.image != null ? item.image.display(70) : '' }}</td>
                    <td>{{ item.name }}</td>
                    <td>
                        <div class="d-flex align-items-center"><a
                                    href="{{ path('probleme_show', {'id': item.id}) }}"
                                    class="btn btn-dark">Voir</a>
                            <a href="{{ path('probleme_edit', {'id': item.id}) }}"  class="btn btn-info mx-3">Modifier</a>
                        </div>
                    </td>
                </tr>

            {% else %}
                <tr>
                    <td colspan="3">no records found</td>
                </tr>
            {% endfor %}
            </tbody>
        </table>

    {% endif %}

                        </td>
                    </tr>
                {% else %}
                    <tr>
                        <td colspan="3">no records found</td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>

        <hr class="my-5">
    {% endfor %}

{% endblock %}