{% extends '@InstallBois/index.html.twig' %}

{% block stylesheets %}
    {{ parent() }}
    <style>
        h2 {
            text-align: center;
        }

        .boutonAction {
            padding: .5rem .7rem;
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        th, td {
            padding: 0.7rem;
            word-break: break-word;
        }

        .col-id {
            min-width: 70px;
        }

        .col-titre {
            min-width: 180px;
        }

        .col-description {
            min-width: 300px;
        }

        .col-date {
            min-width: 120px;
        }

        .col-actions {
            min-width: 260px;
        }
    </style>
{% endblock %}

{% block page_content %}
    <main>
        <h2>Gestion des documents</h2>
        <div style="text-align: center">
            <a href="{{ path('app_technical_doc_admin_new') }}" class="boutonAction">+ Ajouter un document</a>
        </div>
        <section style="padding: 1rem; margin-top: 5rem; overflow-x: auto; width: 100%;">
            {% if technicalDocs is not empty %}
                <table style="width: 100%">
                    <thead>
                    <tr>
                        <th class="col-id">Id</th>
                        <th class="col-titre">Titre</th>
                        <th class="col-description">Description</th>
                        <th class="col-date">Crée/Màj le</th>
                        <th class="col-actions">Actions</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for doc in technicalDocs %}
                        <tr>
                            <td>{{ doc.id }}</td>
                            <td>{{ doc.title }}</td>
                            <td style="text-align: start; padding: 1rem; word-wrap: break-word" title="{{ doc.description }}">
                                {{ doc.description|length > 100 ? doc.description|slice(0, 100) ~ '...' : doc.description }}
                            </td>
                            <td>
                                {% if doc.createdAt < doc.updatedAt %}
                                    {{ doc.updatedAt | date("d/m/Y") }}
                                    {% else %}
                                    {{ doc.createdAt | date("d/m/Y") }}
                                {% endif %}
                            </td>
                            <td>
                                <a href="{{ path('app_technical_doc_show', {id: doc.id}) }}" target="_blank" class="boutonAction" style="padding: .8rem .7rem">
                                    Voir
                                </a>
                                <a href="{{ path('app_technical_doc_admin_edit', {id: doc.id}) }}" class="boutonAction" style="padding: .8rem .7rem">Modifier</a>
                                <form action="{{ path('app_technical_doc_admin_delete', {id: doc.id}) }}" method="post" style="display: inline-block; margin: 0;">
                                    <input type="hidden" name="_token" value="{{ csrf_token('delete_'~doc.id) }}">
                                    <button type="submit" class="boutonAction" style="background-color: red" onclick="alert('Voulez-vous supprimer le document : {{ doc.title }} ?')">Supprimer</button>
                                </form>
                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
                {% else %}
                <div style="text-align: center;">Aucun document</div>
            {% endif %}

        </section>
    </main>
{% endblock %}