import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { bootstrapApplication } from '@angular/platform-browser';

interface Task {
  id: number;
  title: string;
  done: boolean;
}

@Component({
  selector: 'app-task-list',
  standalone: true,
  imports: [CommonModule],
  template: `
    <ul>
      <li *ngFor="let task of tasks; index as i; trackBy: trackByTaskId">
        {{ i + 1 }}. {{ task.title }} - {{ task.done ? 'Done' : 'Pending' }}
      </li>
    </ul>
  `
})
export class TaskListComponent {
  tasks: Task[] = [
    { id: 1, title: 'Learn Angular', done: false },
    { id: 2, title: 'Build a component', done: false },
    { id: 3, title: 'Write tests', done: true }
  ];

  trackByTaskId(index: number, task: Task): number {
    return task.id;
  }
}

bootstrapApplication(TaskListComponent).catch((err) => console.error(err));