{% embed '@AdminLTE/Widgets/box-widget.html.twig' with {'project': project, 'activities': activities, 'page': page} %}
        {% import "activity/actions.html.twig" as actions %}
        {% import "macros/widgets.html.twig" as widgets %}
        {% block box_title %}{{ 'menu.admin_activity'|trans }}{% endblock %}
        {% block box_attributes %}
            id="activity_list_box" data-href="{{ path('project_activities', {'id': project.id}) }}" data-reload="kimai.activityUpdate kimai.activityDelete"
        {% endblock %}
        {% block box_tools %}
            {% if project.visible and project.customer.visible and is_granted('create_activity') %}
                <a class="modal-ajax-form open-edit btn btn-default btn-sm btn-pager" data-href="{{ path('admin_activity_create_with_project', {'project': project.id}) }}" data-toggle="tooltip" data-placement="top" title="{{ 'create'|trans }}"><i class="{{ 'create'|icon }}"></i></a>
            {% endif %}
            {% if activities|length > 0 %}
                {{ pagination(activities, { css_container_class: 'pagination pagination-sm inline', routeName: 'project_activities', routeParams: {'id': project.id} }) }}
            {% endif %}
        {% endblock %}
        {% block box_body_class %}no-padding{% endblock %}
        {% block box_tools_attributes %}data-page="{{ page }}"{% endblock %}
        {% block box_body %}
            {% if activities|length == 0 %}
                <div class="comment">{{ 'error.no_entries_found'|trans }}</div>
            {% else %}
                <table class="table table-hover dataTable">
                    <thead>
                        <tr>
                            <th>{{ 'label.name'|trans }}</th>
                            <th class="hidden-xs">{{ 'label.comment'|trans }}</th>
                            <th class="w-min text-center">{{ 'label.visible'|trans }}</th>
                            <th class="w-min text-center">{{ 'label.team'|trans }}</th>
                            <th class="actions"></th>
                        </tr>
                    </thead>
                    <tbody>
                    {% for activity in activities %}
                        <tr {{ widgets.activity_row_attr(activity, now) }}>
                            <td>{{ widgets.label_activity(activity) }}</td>
                            <td class="hidden-xs">{{ activity.comment|comment1line(not app.user.smallLayout) }}</td>
                            <td class="w-min text-center">{{ widgets.label_visible(activity.visible) }}</td>
                            <td class="w-min text-center">{{ widgets.badge_team_access(activity.teams) }}</td>
                            <td class="actions">{{ actions.activity(activity, 'project_details', true) }}</td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            {% endif %}
        {% endblock %}
    {% endembed %}
    <script type="text/javascript">
        {% set eventName = app.request.xmlHttpRequest ? 'kimai.reloadPage' : 'kimai.initialized' %}
        document.addEventListener('{{ eventName }}', function() {
            KimaiPaginatedBoxWidget.create('#activity_list_box');
        });
    </script>