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

{% block title %}Probleme{% endblock %}

{% block body %}
    <div class="m-5">
        <div class="d-flex">
            <h1 class="fs-1">Probleme</h1>
        </div>

        <table class="table">
            <tbody>
            <tr>
                <th>Id</th>
                <td>{{ probleme.id }}</td>
            </tr>
            <tr>
                <th>Name</th>
                <td>{{ probleme.name }}</td>
            </tr>
            </tbody>
        </table>


        <table class="table table-striped">
            <thead>
            <tr>
                <th>Id</th>
                <th></th>
                <th>Name</th>
                <th>actions</th>
            </tr>
            </thead>
            <tbody>
            {% for probleme in probleme.sousProbleme %}
                <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>

        <a href="{{ path('admin') }}" class="btn btn-dark">Retour</a>


        <a href="{{ path('probleme_edit', {'id': probleme.id}) }}" class="btn btn-info">Modifier</a>

        <a href="{{ path('probleme_add',{'id':probleme.id}) }}" class="btn btn-success">Ajouter</a>

        {{ include('CRUD/probleme/_delete_form.html.twig') }}
    </div>
{% endblock %}