{% set widgetId = options.id ~ '_widget' %}
<div class="box box-secondary box-paginated" id="{{ widgetId }}" data-href="{{ path('tasks_my_paginated', {'page': 1}) }}" data-reload="kimai.taskUpdate kimai.taskUnassign kimai.taskAssign kimai.userTaskDelete kimai.myTaskCreate">
    <div class="box-header">
        <h3 class="box-title">{{ title|trans }}</h3>

        <div class="box-tools pull-right" data-page="{{ options.page }}">
            {% if is_granted('task_edit_own') %}
                <a class="btn btn-default btn-sm btn-pager btn-create modal-ajax-form" href="{{ path('tasks_create_my') }}"><i class="{{ 'create'|icon }}"></i></a>
            {% endif %}
            {{ pagination(data, { proximity: 1, css_container_class: 'pagination pagination-sm inline', routeName: 'tasks_my_paginated' }) }}
        </div>
    </div>
    <div class="box-body">
        <ul class="todo-list ui-sortable">
            {% for entry in data %}
                {% set class = '' %}
                {% set rowClass = '' %}
                {% set tooltip = null %}
                {% if entry.end is not null %}
                    {% set tooltip = entry.end|date_full %}
                    {% set class = 'text-success' %}
                    {% set rowClass = 'success' %}
                    {% if entry.overdue %}
                        {% set class = 'text-danger' %}
                        {% set rowClass = 'danger' %}
                    {% endif %}
                {% endif %}
                <li
                    {% if is_granted('task_details', entry) %}
                        class="alternative-link open-edit {{ rowClass }}" data-href="{{ path('tasks_detail', {'id': entry.id}) }}"
                    {% elseif is_granted('task_edit', entry) %}
                        class="modal-ajax-form open-edit {{ rowClass }}" data-href="{{ path('tasks_edit', {'id': entry.id}) }}"
                    {% else %}
                        class="{{ rowClass }}"
                    {% endif %}>
                    {#
                    <span class="handle ui-sortable-handle">
                        <i class="fa fa-ellipsis-v"></i>
                        <i class="fa fa-ellipsis-v"></i>
                    </span>
                    #}
                    {% if is_granted('task_close', entry) %}
                    <input type="checkbox" value="{{ entry.id }}">
                    {% endif %}
                    <span class="label-color">
                        <i class="dot {{ 'dot'|icon }} fa-fw" style="color:{{ (entry.project.color ?? entry.project.customer.color) }}" data-toggle="tooltip" data-placement="right" title="{{ entry.project.name }} / {{ entry.project.customer.name }}"></i>
                        <span class="text {{ class }}"{% if tooltip is not null %} data-toggle="tooltip" data-placement="right" title="{{ tooltip }}"{% endif %}>{{ entry.title }}</span>
                    </span>
                    {% set duration = entry.duration %}
                    {% if duration is not null %}
                    <small class="label label-primary hidden-xs">{{ entry.duration|duration }}</small>
                    {% endif %}
                    <div class="btn-group pull-right">
                        {% if entry.activeRecord(app.user) is not null %}
                            <a href="{{ path('stop_task', {'id': entry.id}) }}" class="btn btn-default btn-xs api-link" data-event="kimai.taskUpdate kimai.taskStop kimai.timesheetUpdate kimai.timesheetStop" data-method="PATCH" data-msg-error="{{ 'action.update.error'|trans }}" data-msg-success="{{ 'action.update.success'|trans }}"><i class="{{ 'pause'|icon }}"></i></a>
                        {% elseif is_granted('task_start', entry) %}
                            <a href="{{ path('start_task', {'id': entry.id}) }}" class="btn btn-default btn-xs api-link" data-event="kimai.taskUpdate kimai.taskStart kimai.timesheetUpdate kimai.timesheetStart" data-method="PATCH" data-msg-error="{{ 'action.update.error'|trans }}" data-msg-success="{{ 'action.update.success'|trans }}"><i class="{{ 'start'|icon }}"></i></a>
                        {% endif %}
                        {% if is_granted('task_edit', entry) %}
                            <a href="{{ path('tasks_edit', {'id': entry.id}) }}" class="btn btn-default btn-xs modal-ajax-form"><i class="{{ 'edit'|icon }}"></i></a>
                        {% endif %}
                        {% if is_granted('task_assign', entry) %}
                            <a href="{{ path('unassign_task', {'id': entry.id}) }}" class="btn btn-default btn-xs api-link" data-event="kimai.taskUpdate kimai.taskUnassign kimai.timesheetUpdate kimai.timesheetStop" data-method="PATCH" data-question="{{ 'task.unassign'|trans }}" data-msg-error="{{ 'action.update.error'|trans }}" data-msg-success="{{ 'action.update.success'|trans }}"><i class="fas fa-user-minus"></i></a>
                        {% endif %}
                        {% if is_granted('task_delete', entry) %}
                            <a href="{{ path('delete_task', {'id': entry.id}) }}" class="btn btn-default btn-xs api-link" data-event="kimai.taskUpdate kimai.taskDelete kimai.userTaskDelete kimai.timesheetUpdate kimai.timesheetStop" data-method="DELETE" data-question="confirm.delete" data-msg-error="action.delete.error" data-msg-success="action.delete.success"><i class="{{ 'delete'|icon }}"></i></a>
                        {% endif %}
                    </div>
                </li>
            {% endfor %}
        </ul>
    </div>
</div>
{% if not app.request.xmlHttpRequest %}
<style>
    .todo-list > li .tools i {
        margin-right: 7px;
    }
    .todo-list .label {
        font-size: 75% !important;
        font-weight: 500;
        padding: .3em .6em;
    }
</style>
<script type="text/javascript">
    document.addEventListener('kimai.initialized', function() {
        KimaiPaginatedBoxWidget.create('#{{ widgetId }}');

        $('#{{ widgetId }}').on('click', 'input[type=checkbox]', function(event) {
            var item = event.target;
            var $item = $(item);

            var closeItem = function (item) {
                item.parents('li').first().removeClass('done').addClass('done');
                item.parents('li').find('.tools').css('display', 'none');
                item.prop('checked', true);
                kimai.getPlugin('event').trigger('kimai.timesheetUpdate kimai.timesheetStop');
            };
            var reopenItem = function (item) {
                item.parents('li').first().removeClass('done');
                item.parents('li').find('.tools').css('display', '');
                item.prop('checked', false);
            };

            if (this.checked) {
                kimai.getPlugin('alert').question('{{ 'task.close'|trans }}', function (result) {
                    if (result) {
                        var url = '{{ path('close_task', {'id': 111}) }}'.replace('111', $item.val());
                        kimai.getPlugin('api').patch(url, {}, function() {
                                kimai.getPlugin('alert').success('{{ 'action.update.success'|trans }}');
                                closeItem($item);
                            }, function() {
                                kimai.getPlugin('alert').error('{{ 'action.update.error'|trans }}');
                                reopenItem($item);
                            }
                        );
                    } else {
                        reopenItem($item);
                    }
                });
            } else {
                kimai.getPlugin('alert').question('{{ 'task.reopen'|trans }}', function (result) {
                    if (result) {
                        var url = '{{ path('reopen_task', {'id': 111}) }}'.replace('111', $item.val());
                        kimai.getPlugin('api').patch(url, {}, function() {
                                kimai.getPlugin('alert').success('{{ 'action.update.success'|trans }}');
                                reopenItem($item);
                            }, function() {
                                kimai.getPlugin('alert').error('{{ 'action.update.error'|trans }}');
                                closeItem($item);
                            }
                        );
                    } else {
                        closeItem($item);
                    }
                });
            }
            event.preventDefault();
        });

        {#
        var el = document.getElementById('{{ widgetId }}');
        var sortable = Sortable.create(el);
        #}
    });
</script>
{% endif %}