<div  *ngIf="showRefreshButton" class="process-tasks-refresh" >
    <button (click)="onRefreshClicked()" class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
        <i class="material-icons">refresh</i>
    </button>
</div>

<!-- ACTIVE FORM -->

<span class="activiti-label mdl-badge"
      [attr.data-badge]="activeTasks?.length">{{ 'DETAILS.LABELS.TASKS_ACTIVE'|translate }}</span>

<div class="menu-container" *ngIf="activeTasks?.length > 0" data-automation-id="active-tasks">
    <ul class='mdl-list'>
        <li class="mdl-list__item mdl-list__item--two-line process-tasks__task-item" *ngFor="let task of activeTasks">
            <span class="mdl-list__item-primary-content" (click)="clickTask($event, task)">
                <i class="material-icons mdl-list__item-icon">assignment</i>
                <span>{{task.name || 'Nameless task'}}</span>
                <span class="mdl-list__item-sub-title">
                    {{ 'DETAILS.LABELS.TASK_SUBTITLE' | translate:{user: getUserFullName(task.assignee), created: getFormatDate(task.created, 'mediumDate') } }}
                </span>
            </span>
        </li>
    </ul>
</div>

<!-- START FORM -->

<div *ngIf="activeTasks?.length === 0" data-automation-id="active-tasks-none" class="no-results">
    {{ 'DETAILS.TASKS.NO_ACTIVE' | translate }}
</div>

<div *ngIf="hasStartFormDefined()">
    <span class="activiti-label">{{ 'DETAILS.LABELS.START_FORM'|translate }}</span>

    <!--IF START TASK COMPLETED -->
    <div class="menu-container">
        <ul class='mdl-list'>
            <li class="mdl-list__item mdl-list__item--two-line process-tasks__task-item">
                <span class="mdl-list__item-primary-content" (click)="clickStartTask($event)">
                    <i class="material-icons mdl-list__item-icon">assignment</i>
                    <span>{{ 'DETAILS.LABELS.START_FORM'|translate }}</span>
                    <span class="mdl-list__item-sub-title">
                        {{ 'DETAILS.LABELS.TASK_SUBTITLE' | translate:{user:getUserFullName(processInstanceDetails.startedBy), created: getFormatDate(processInstanceDetails.started, 'mediumDate') } }}
                    </span>
                </span>
            </li>
        </ul>
    </div>

</div>

<!-- COMPLETED FORM -->
<span class="activiti-label mdl-badge"
      [attr.data-badge]="completedTasks?.length">{{ 'DETAILS.LABELS.TASKS_COMPLETED'|translate }}</span>

<div class="menu-container" *ngIf="completedTasks?.length > 0" data-automation-id="completed-tasks">
    <ul class='mdl-list'>
        <li class="mdl-list__item mdl-list__item--two-line process-tasks__task-item" *ngFor="let task of completedTasks">
            <span class="mdl-list__item-primary-content" (click)="clickTask($event, task)">
                <i class="material-icons mdl-list__item-icon">assignment</i>
                <span>{{task.name || 'Nameless task'}}</span>
                <span class="mdl-list__item-sub-title">
                    {{ 'DETAILS.LABELS.TASK_SUBTITLE' | translate:{user:getUserFullName(task.assignee), created: getFormatDate(task.created, 'mediumDate') } }}
                </span>
            </span>
        </li>
    </ul>
</div>

<div *ngIf="completedTasks?.length === 0" data-automation-id="completed-tasks-none" class="no-results">
    {{ 'DETAILS.TASKS.NO_COMPLETED' | translate }}
</div>

<dialog *ngIf="hasStartFormDefined()" class="mdl-dialog task-details-dialog" #startDialog>
    <h4 class="mdl-dialog__title">{{ 'DETAILS.LABELS.START_FORM'|translate }}</h4>
    <div class="mdl-dialog__content form__size">
        <activiti-start-form [processId]="processId" [processDefinitionId]="processInstanceDetails?.processDefinitionId"
                             [showRefreshButton]="false" [readOnlyForm]="true" >
        </activiti-start-form>
    </div>
    <div class="mdl-dialog__actions">
        <button type="button" (click)="closeSartDialog()" class="mdl-button close">{{ 'DETAILS.TASKS.TASK_CLOSE' | translate }}</button>
    </div>
</dialog>
