{% embed '@AdminLTE/Widgets/box-widget.html.twig' with {'customer': customer, 'projects': projects, 'page': page} %}
        {% import "project/actions.html.twig" as actions %}
        {% import "macros/widgets.html.twig" as widgets %}
        {% block box_title %}{{ 'menu.admin_project'|trans }}{% endblock %}
        {% block box_attributes %}
            id="project_list_box" data-href="{{ path('customer_projects', {'id': customer.id}) }}" data-reload="kimai.projectUpdate kimai.projectDelete"
        {% endblock %}
        {% block box_tools %}
            {% if is_granted('view_reporting') and is_granted('budget_project') %}
                <a class="btn btn-default btn-sm btn-pager" href="{{ path('report_project_view', {'customer': customer.id}) }}" data-toggle="tooltip" data-placement="top" title="{{ 'report_project_view'|trans({}, 'reporting') }}"><i class="{{ 'reporting'|icon }}"></i></a>
            {% endif %}
            {% if customer.visible and is_granted('create_project') %}
                <a class="modal-ajax-form open-edit btn btn-default btn-sm btn-pager" data-href="{{ path('admin_project_create_with_customer', {'customer': customer.id}) }}" data-toggle="tooltip" data-placement="top" title="{{ 'create'|trans }}"><i class="{{ 'create'|icon }}"></i></a>
            {% endif %}
            {% if projects|length > 0 %}
                {{ pagination(projects, { css_container_class: 'pagination pagination-sm inline', routeName: 'customer_projects', routeParams: {'id': customer.id} }) }}
            {% endif %}
        {% endblock %}
        {% block box_body_class %}no-padding{% endblock %}
        {% block box_tools_attributes %}data-page="{{ page }}"{% endblock %}
        {% block box_body %}
            {% if projects|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.project_end'|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 project in projects %}
                    <tr {{ widgets.project_row_attr(project, now) }}>
                        <td>{{ widgets.label_project(project) }}</td>
                        <td class="hidden-xs">{{ project.comment|comment1line(not app.user.smallLayout) }}</td>
                        <td class="w-min text-center">
                            {% if project.end is not null %}
                                {{ project.end|date_short }}
                            {% else %}
                                &ndash;
                            {% endif %}
                        </td>
                        <td class="w-min text-center">{{ widgets.label_visible(project.visible) }}</td>
                        <td class="w-min text-center">{{ widgets.badge_team_access(project.teams) }}</td>
                        <td class="actions">{{ actions.project(project, 'customer_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('#project_list_box');
        });
    </script>