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

{% block title %}Mes activités{% endblock %}

{% block body %}
<script>
    $(document).ready(function () {
        $(".page-title h1").text("Mes d\'activités");
        $(".bandeau-img img").attr("src","https://edgarpetrus.fr/site-perso/web/app/uploads/2023/12/icon_office.png");

        /* Datatable de clients */
        $('#ActivitiesTable').DataTable({
            "columnDefs": [
                { "width": "8%", "targets": 0 }
            ],
            responsive: true,
            ajax: {
                type: 'GET',
                url: '/activities/ajax/{{ id }}', 
                dataSrc: 'data',
                dataType: 'json',
            },
            ordering: true,
            paging: false,
            columns: [
                { data: 'activityID' },
                { data: 'typeActivity' },
                { data: 'activityName' },
                { data: 'activityComment' },
                { data: 'actions' }
            ]
        });

    })
</script>
<div class="container-page">
    <a href="/services"> << Retourner à la liste des familles d'activités</a>
    <br>
    <div class="btn-group" role="group">
        <a class="btn-glossy" href="/activities/{{ id }}/add" role="button">Ajouter une activité</a>
    </div>
    <br>
    <!-- Your grid container -->
    <table id="ActivitiesTable" class="table table-striped">
        <thead>
            <tr>
                <th>#</th>
                <th>Type d'activité</th>
                <th>Nom de l'activité</th>
                <th>Description</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>  
{% endblock %}