<li [ngClass]="{ completed: todo.completed, editing: isEditing }" [attr.data-priority]="4 - (index % 5)">
    <div class="view">
        <input class="toggle" type="checkbox" (click)="toggleTodo()" [checked]="todo.completed" />
        <label (dblclick)="startEdit()">{{ todo.title }}</label>
        <button class="destroy" (click)="removeTodo()"></button>
    </div>
    <div *ngIf="isEditing" class="input-container">
        <input #todoInputRef class="edit" id="edit-todo-input" (focus)="handleFocus($event)" (blur)="handleBlur($event)" (keyup.enter)="updateTodo()" [formControl]="titleFormControl" />
        <label class="visually-hidden" htmlFor="edit-todo-input"> Edit Todo Input </label>
    </div>
</li>
