{% extends '@InstallBois/index.html.twig' %}
{% import "forms-macro/popup.html.twig" as macro %}

{% block title %}
    INSTALL-BOIS
{% endblock %}

{% block head %}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/2.2.3/js/dataTables.buttons.min.js"></script>
    <script type="text/javascript"
            src="https://cdn.datatables.net/responsive/2.3.0/js/dataTables.responsive.min.js"></script>
    {{ parent() }}
    <script type="text/javascript" src="{{ asset('externalJS/datepicker-fr.js') }}"></script>
    <script type="text/javascript"
            src="{{ asset('install-bois/initDateTimeFormatDatatable.js') ~ "?rnd=" ~ random() }}"></script>
{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.2.3/css/buttons.dataTables.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.4.0/js/dataTables.buttons.min.js">
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.2.3/js/dataTables.buttons.min.js">
{% endblock %}

{% block javascripts %}
    {#    <script src="{{ asset('install-bois/app.js') }}"></script> #}
    {{ parent() }}
{% endblock %}

{% block page_content_start %}
    {{ parent() }}
    <div class="page-title">
        <h4 class="page-title-h4">
            Documentation | {{ section }}
        </h4>
    </div>
{% endblock %}

{% block page_content %}
    <div class="container-fluid">
        <div class="col-sm-12 col-md-12 col-lg-12">
            <div>
                <table id="files-list" class="hover row-border" style="padding:1%;width:100%">
                    <thead>
                    <tr>
                        <th>Date de publication</th>
                        <th>Titre du document</th>
                        <th style="text-align: center;">Actions</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for file in files %}
                        <tr>
                            <td style="width: 13%">{{ file.publicationDate ? file.publicationDate|date('d/m/Y') : "Non renseignée" }}</td>
                            <td>{{ file.name }}</td>
                            <td style="display: flex;align-items: center;justify-content: center;text-align: center">
                                {% if file.filePath %}
                                    <a style="padding:8px" target="_blank" href="{{ asset(file.filePath) }}">
                                        <img src="{{ asset('install-bois/icon/tab_action_consulter.png') }}">
                                    </a>
                                {% endif %}
                            </td>
                        </tr>
                    {% else %}
                        <tr>
                            <td style="text-align: center" colspan="3">Aucun document n'a été mis en ligne</td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
            <script type="application/javascript">
                let params = {
                    "columnDefs": [
                        {"type": "date-eu", "targets": [0]},
                    ],
                };
                initDatatable('#files-list', params, [2]);
            </script>
        </div>
    </div>
{% endblock %}