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

{% block title %}Itinéraire{% endblock %}

{% block body %}

    {% include 'include/menu.html.twig' %}
    <div class="app-content content" style="background-color: white !important;">
        <div class="content-wrapper">
            <div class="content-body">
                <section id="dashboard-itinerary">
                    <div class="text-center mb-2">
                        <h4>{{ itinerary.fiche.name }}</h4>
                    </div>
                    <div class="w-100 d-flex justify-content-center">
                    <div class="w-75">
                            <table class="table table-bordered">
                                <thead class="thead-light">
                                <tr>
                                    <th style="width: 10%;" class="text-black text-center">Etapes</th>
                                    <th style="width: 40%;" class="text-black text-center">Ce que vous faites</th>
                                    <th style="width: 40%;" class="text-black text-center">Les supports</th>
                                </tr>
                                </thead>
                                <tbody id="tab">
                                {% for key, item in content %}
                                        {% if item['step'] is defined or item['activity'] is defined or item['support'] is defined %}
                                        <tr>
                                            <td style="width: 10%;">
                                                <div class="display-inline-block w-100 " style="height: 20px;">  {{ decodeHTML(item['step']) }}</div>
                                            </td>
                                            <td style="width: 45%;">
                                                <div class="display-inline-block w-100 " style="height: 20px;">{{ decodeHTML(item['activity']) }}</div>
                                            </td>
                                            <td style="width: 45%;">
                                                <div class="display-inline-block w-100 " style="height: 20px;">{{ decodeHTML(item['support']) }}</div>
                                            </td>
                                        </tr>
                                        {% endif %}



                                {% endfor %}


                                </tbody>
                            </table>
                    </div>
                </div>
                </section>
            </div>
        </div>
</div>
{% endblock %}