{% 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 }}">
            {{ pagerfanta(data, 'twitter_bootstrap3_translated', { 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 %}
                {#
                    DOESN'T work with Kimai 1.7
                    <li{% if is_granted('task_edit', entry) %} data-href="{{ path('tasks_edit', {'id': entry.id}) }}" class="open-edit modal-ajax-form{{ rowClass }}"{% endif %}>
                #}
                <li class="{{ rowClass }}">
                    {#
                    <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="text{{ class }}"{% if tooltip is not null %} data-toggle="tooltip" data-placement="right" title="{{ tooltip }}"{% endif %}>{{ entry.title }}</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 is_granted('task_start', entry) %}
                            {% if not entry.activeRecord %}
                                <a href="{{ path('start_task', {'id': entry.id}) }}" class="btn btn-default btn-xs api-link{% if duration is not null %} active{% endif %}" 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="{% if duration is not null %}{{ 'pause'|icon }}{% else %}{{ 'start'|icon }}{% endif %}"></i></a>
                            {% else %}
                                <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>
                            {% endif %}
                        {% 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 class="box-footer clearfix no-border">
        {% if is_granted('task_edit_own') %}
            <a class="btn btn-default btn-create modal-ajax-form pull-right" href="{{ path('tasks_create_my') }}"><i class="fas fa-plus"></i> {{ 'create'|trans }}</a>
        {% endif %}
    </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 %}