import { Component } from '@angular/core';
import { signal } from '@angular/core';

@Component({
  selector: 'bh-lists',
  standalone: true,
  imports: [],
  template: `<button type="button" (click)="reverse()">Reverse tools</button>
    <ul>
      @for (tool of tools(); track tool.id) {
        <li [attr.data-id]="tool.id">
          <label>{{ tool.name }}<input [value]="tool.name" /></label>
        </li>
      } @empty {
        <li>No tools</li>
      }
    </ul>
    <p data-result>{{ tools().length }} tools listed</p>`,
})
export class App {
  tools = signal([
    { id: 'DR-4', name: 'Drill' },
    { id: 'CL-2', name: 'Clamp' },
  ]);
  reverse(): void {
    this.tools.update((items) => [...items].reverse());
  }
}