{# Vue d'affichage des données brutes #}
{% extends 'base.html.twig' %}

{% block body %}

        <div style="display: flex; justify-content: flex-end">

            <a href="{{ path('app_datas', {'id': pdf.id}) }}" class="btn btn-primary" type="button">Voir les données significatives</a>
            <a href="{{ path('app_index') }}" class="btn btn-primary" type="button"><i class="fa-solid fa-arrow-rotate-left"></i></a>

            <a href="{{ path('app_edit', {'id': pdf.id}) }}" class="btn btn-primary" type="button"><i class="fa-solid fa-pen-to-square"></i></a>
            {{ include('pdf/_delete_form.html.twig') }}
        </div>
        <div class="container">
            <h1>Extraction des données brutes :</h1>

                {% if app.flashes %}
                    <pre>{{ dump(app.flashes) }}</pre>
                {% endif %}

            {% if extractedDataContent is not empty %}

            <h2>{{ pdf.name }}</h2>
            <h3>Opérateur: {{ pdf.operator.operatorName }}</h3>

            <div class="container">
                <div class="row">
                    <div class="col">
                        <table class="table">
                            <thead class="table-light">
                            <tr>
                                <th scope="col">Page</th>
                                <th scope="col">Index</th>
                                <th scope="col">Texte</th>
                                <th scope="col">X</th>
                                <th scope="col">Y</th>
                                <th scope="col">Taille de la police</th>
                                <th scope="col">Référence de police</th>
                            </tr>
                            </thead>
                            <tbody>

                            {% for data in extractedDataContent %}
                                <tr>
                                    <td>{{ data.page }}</td>
                                    <td>{{ data.index }}</td>
                                    <td>{{ data.text }}</td>
                                    <td>{{ data.x }}</td>
                                    <td>{{ data.y }}</td>
                                    <td>{{ data.fontSize }}</td>
                                    <td>{{ data.font }}</td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        {% else %}
            <div class="container">
                <h2>Aucune donnée disponible</h2>
            </div>
        {% endif %}

{% endblock %}