{% extends '@AdminLTE/layout/cfgodd-layout.html.twig' %}

{% block page_title %}{% trans %}document.title{% endtrans %}{% endblock %}

{% block page_content %}
            {% if is_granted('ROLE_ADMIN') %}
            <div class="text-right mb-3">
                <a href="{{ path('app_document_new') }}" class="btn btn-primary">
                    <i class="fa fa-plus"></i> {% trans %}document.add{% endtrans %}
                </a>
            </div>
            {% endif %}
    

    {% embed '@AdminLTE/Widgets/box-widget.html.twig' %}
        {% block box_body %}
            <table id="documentTable" class="table table-striped">
            <thead>
                <th>{% trans %}basics.type{% endtrans %}</th>
                <th>{% trans %}basics.title{% endtrans %}</th>
                <th>{% trans %}basics.publicationDate{% endtrans %}</th>
                <th>{% trans %}basics.filename{% endtrans %}</th>
                <th>{% trans %}basics.enabled{% endtrans %}</th>
                {% if is_granted('ROLE_ADMIN') %}
                    <th style="width: 100px"></th>
                {% endif %}
            </thead>
            <tbody>
            {% for document in documents %}
                <tr>
                    <td><img src="{{ asset('dist/img/icon/') }}{{document.icon}}.png" class="img-size-32"></td>
                    <td>{{ document.title }}</td>
                    <td><div class="text-center">{{ document.publicationDate|date("d/m/Y") }}</div></td>
                    <td>{{ document.filename }}</td>
                    <td><div class="text-center">{{ document.published ? 'Oui' : 'Non' }}</div></td>
                    {% if is_granted('ROLE_ADMIN') %}
                        <td class="text-center">
                            <div class="btn-group">
                                <a href="{{ path('app_document', { 'id': document.id }) }}" class="btn btn-sm btn-default" role="button" aria-pressed="true">{% trans %}basics.update{% endtrans %}</a>
                            </div>
                        </td>
                    {% endif %}
                </tr>
            {% endfor %}
            </tbody>
            </table>
        {% endblock %}
    {% endembed %}

{% endblock %}

{% block javascripts %}
    <script src="{{ asset('plugins/datatables/French.json') }}"></script>
    <script>
        $(function () {
            $("#documentTable").DataTable({
                "pageLength": 25,
                "language": {
                    "url": "{{ asset('plugins/datatables/French.json') }}"
                }
            });
        });
    </script>

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

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