<!-- Mobile toggle button -->
<a [ngClass]="(showSidebar)?'ti-close':'ti-menu'" class="btn btn-success show-left-part d-block d-md-none"
	href="javascript:void(0)" (click)="mobileSidebar()"></a>
<div class="main-part">
	<div class="left-part bg-white fixed-left-part" [ngClass]="{'show-panel': showSidebar}">
		<div class="position-relative">
			<div class="px-3 py-3 d-flex align-items-center border-bottom">
				<p class="mb-0 py-1 text-center font-18 font-bold">{{ remainingList() }} tasks left</p>
			</div>
			<ul class="tasklist list-style-none">
				<li class="task-item d-flex all border-bottom" [class.active]="selectedCategory === 'all'"
					(click)="selectionlblClick('all')">
					All <span class="badge badge-primary ml-auto pt-1">{{todos.length}}</span></li>
				<li class="task-item d-flex incomplete border-bottom" [class.active]="selectedCategory === 'uncomplete'"
					(click)="selectionlblClick('uncomplete')">
					Incompleted <span class="badge badge-danger ml-auto pt-1">{{ remainingList() }}</span></li>
				<li class="task-item d-flex complete border-bottom" [class.active]="selectedCategory === 'complete'"
					(click)="selectionlblClick('complete')">
					Completed <span class="badge badge-success ml-auto pt-1">{{todos.length - remainingList()}}</span>
				</li>
			</ul>
		</div>
	</div>
	<div class="right-part bg-white">
		<div class="card">
			<div class="px-3 py-3 d-flex align-items-center border-bottom bg-light">
				<div class="custom-control custom-checkbox flex-shrink-0">
					<input type="checkbox" class="custom-control-input" id="all" (change)="allTodos()">
					<label class="custom-control-label" for="all">Mark All</label>
				</div>
				<form [formGroup]="inputFg" class="d-flex align-items-center ml-auto">
					<input type="text" #inputData [(ngModel)]="searchText" class="todo-input form-control mb-0 mx-2"
						placeholder="Type here to add new todo..." formControlName='mess'
						(keyup.enter)="addTodo(inputData.value)" />
					<button type="button" [disabled]="!searchText" id="btnAddTodo" class="btn btn-primary flex-shrink-0"
						(click)="addTodo(inputData.value)">Add Todo</button>
				</form>
			</div>
			<div>
				<div *ngFor="let todo of copyTodos;let i=index" class="todo-item py-3 pl-3 border-bottom">
					<div class="todo-item-left d-flex w-100">
						<div class="custom-control custom-checkbox">
							<input type="checkbox" class="custom-control-input" id={{todo.id}}
								[(ngModel)]="todo.completionStatus">
							<label class="custom-control-label" for={{todo.id}}></label>
						</div>
						<div class="todo-item-label w-100">
							<span class="d-flex align-items-start" *ngIf="!todo.edit" (click)="editTodo(todo.id)">
								<div>
									<p class="mb-1">{{todo.message}}</p>
									<p class="mb-0 font-12">{{todo.date | date}}</p>
								</div>
								<div class="ml-auto px-3 mr-2">
									<a href="javascript: void(0);" (click)='editTodo(todo.id,"edit")' class="link mr-3"
										placement="top" ngbTooltip="Edit">
										<i-feather name="edit-2" class="feather-sm"></i-feather>
									</a>
									<a href="javascript: void(0);" class="link" (click)='deleteTodo(i)' placement="top"
										ngbTooltip="Delete">
										<i-feather name="trash-2" class="feather-sm"></i-feather>
									</a>
								</div>
							</span>
							<span class="d-flex align-items-start" *ngIf="todo.edit">
								<input type="text" [(ngModel)]="todo.message" class="form-control" />
								<div class="ml-auto d-flex px-3 mr-2">
									<a href="javascript: void(0);" (click)='editTodo(todo.id,"save")' class="link mr-3"
										placement="top" ngbTooltip="Save">
										<i-feather name="save" class="feather-sm"></i-feather>
									</a>
									<a href="javascript: void(0);" class="link" (click)='deleteTodo(i)' placement="top"
										ngbTooltip="Delete">
										<i-feather name="trash-2" class="feather-sm"></i-feather>
									</a>
								</div>
							</span>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>