{% extends 'base.html.twig' %}

{% block title %} = {{title}}{% endblock %}

{% block body %}
    <h1>{{title}}</h1>
    <a href="{{ path(routesubmit) }}" class="btn btn-success">Ajouter</a>

            <div class="dataTable_wrapper">
                <table class="table table-striped table-bordered table-hover" id="dataTables" style="width:100%">
                    <thead>
                    <tr>
                        <th width="70px" class="no-sort">Action</th>
                        <th width="70px" class="no-sort">Date</th>
                        <th>Titre</th>
                        <th>Débit</th>
                        <th>Crédit</th>
                        <th width="150px">Montant</th>
                    </tr>
                    </thead>
                    <tbody>
                        {% for operation in operations %}
                            <tr>
                                <td><a href="{{ path(routeupdate,{id:operation.id}) }}"><i class="fas fa-file fa-2x"></i></a></td>
                                <td>{{operation.date|date("d/m/y")}}</td>
                                <td>{{operation.title}}</td>
                                <td>{{operation.debit.num01}}-{{operation.debit.num02}} = {{operation.debit.title}}</td>
                                <td>{{operation.credit.num01}}-{{operation.credit.num02}} = {{operation.credit.title}}</td>
                                <td>{{operation.montant}}</td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
{% endblock %}

{% block localscript %}
    <script>
        $(document).ready(function() {
            $('#dataTables').DataTable({
                columnDefs: [ { "targets": "no-sort", "orderable": false }, { "targets": "no-string", "type" : "num" } ],
                responsive: true,
                iDisplayLength: 100,
                order: [[ 1, "asc" ]]
            });
        });
    </script>
{% endblock %}