<div class="task-todo-container">
  <input type="text" value="" class="form-control task-todo" placeholder="{{'dashboard.todo.task_todo' | translate}}" (keyup)="addToDoItem($event)" [(ngModel)]="newTodoText"/>
  <i (click)="addToDoItem($event)" class="add-item-icon ion-plus-round"></i>
  <div class="box-shadow-border"></div>

  <ul class="todo-list">
    <li *ngFor="let item of getNotDeleted()" [ngClass]="{checked: item.isChecked, active: item.isActive}"
        (mouseenter)="item.isActive=true" (mouseleave)="item.isActive=false">

      <div class="blur-container"><div class="blur-box"></div></div>
      <i class="mark" [ngStyle]="{ 'background-color': item.color }"></i>
      <label class="todo-checkbox custom-checkbox custom-input-success">
        <input type="checkbox" [(ngModel)]="item.isChecked">
        <span class="cut-with-dots">{{ item.text }}</span>
      </label>
      <i class="remove-todo ion-ios-close-empty" (click)="item.deleted = true"></i>
    </li>
  </ul>
</div>
