{% 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">
                Administration | Publier des documents
            </h4>
        </div>
{% endblock %}

{% block page_content %}
    <div class="container-fluid">
        <div class="col-sm-12 col-md-12 col-lg-12">
            <div>
                <div class="box-header with-border">
                    <a href="{{ path("files_new") }}">
                        <button type="button" class="boutonAction" style="float:right;">
                            Ajouter un document
                        </button>
                    </a>
                </div>
                <table id="files-list" class="hover row-border" style="padding:1%;width:100%">
                    <thead>
                    <tr>
                        <th>Date de création</th>
                        <th>Date de publication</th>
                        <th>Rubrique</th>
                        <th>Titre du document</th>
                        <th>Cible</th>
                        <th style="text-align: center;">Visible</th>
                        <th style="text-align: center;">Actions</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for file in files %}
                        <tr>
                            <td style="width: 9%">{{ file.createdAt|date('d/m/Y') }}</td>
                            <td style="width: 9%">{{ file.publicationDate ? file.publicationDate|date('d/m/Y') : "Non renseignée" }}</td>
                            <td style="width: 13%">{{ file.getSectionName(file.section) }}</td>
                            <td>{{ file.name }}</td>
                            <td>
                                {% set firstType=true %}
                                {%  if file.type != null %}
                                    {% for type in file.type %}
                                        {% if firstType %}
                                            {{ type }}
                                            {% set firstType=false %}
                                        {% else %}
                                            {{ "; "~type }}
                                        {% endif %}
                                    {% endfor %}
                                {% endif %}
                            </td>
                            {% set bgcolor = file.shouldBeVisible ? "#92D050" : "#C00000" %}
                            <td style="width:8%;color:white;font-weight:bold;text-align: center;background-color: {{ bgcolor }}">{{ file.shouldBeVisible ? 'OUI' : 'NON' }}</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 %}
                                <a href="{{ path('files_edit', {'id': file.id}) }}">
                                    <img src="{{ asset('install-bois/icon/tab_action_modifier.png') }}">
                                </a>
                                <a
                                        id="removeFileBtn"
                                        type="button"
                                        data-toggle="modal"
                                        data-target="#popup-danger-{{ file.id }}"
                                        style="padding:8px;cursor: pointer">
                                    <img alt="Supprimer"
                                         src="{{ asset('install-bois/icon/tab_action_supprimer.png') }}"/>
                                </a>
                                {{ macro.popup("danger", "file-delete", path('files_delete', {'id': file.id}), file.id) }}
                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
            <script type="application/javascript">
                let params = {
                    "columnDefs": [
                        {"type": "date-eu", "targets": [0, 1]},
                    ],
                };
                initDatatable('#files-list', params, [6]);
            </script>
        </div>
    </div>
{% endblock %}