{% extends 'frontend/layout.html.twig' %}

{% block content %}
<div class="container single-template">
    <div class="page-header">
			<h1 class="page-title">
				Télécharger des documents sur les ODD
			</h1>
		</div>


    <table id="documentTable" class="table table-striped">
            <thead>
                <th>{% trans %}basics.title{% endtrans %}</th>
                <th>{% trans %}basics.publicationDate{% endtrans %}</th>
                <th>Fichier</th>
            </thead>
            <tbody>
            {% for document in documents %}
                <tr>
                    <td>{{ document.title }}</td>
                    <td><div class="text-center">{{ document.publicationDate|date("d/m/Y") }}</div></td>
                    <td>
                        <a href="{{asset('downloads/')}}{{document.filename}}">
                            <img src="{{ asset('dist/img/icon/') }}{{document.icon}}.png" height="32px">
                        </a>
                    </td>
                </tr>
            {% endfor %}
            </tbody>
            </table>
</div>
{% endblock %}

{% block js %}
    <script src="{{ asset('plugins/jquery/jquery.min.js') }}"></script>
    <script>
        $(function () {
            $("#documentTable").DataTable({
                "pageLength": 25
            });
        });
    </script>

    <script src="{{ asset('plugins/datatables/jquery.dataTables.js') }}"></script>
    <script src="{{ asset('plugins/datatables-bs4/js/dataTables.bootstrap4.js') }}"></script>
{% endblock %}

{% block css %}
    <link rel="stylesheet" href="{{ asset('plugins/datatables-bs4/css/dataTables.bootstrap4.css') }}">
{% endblock %}