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

let nextId = 0;

@Component({
  selector: '<%= selector %>',
  imports: [],
  templateUrl: './<%= dasherize(name) %>.html',
  styleUrl: './<%= dasherize(name) %>.css',
})
export class <%= classify(name) %> {
  protected readonly instanceId = `<%= dasherize(name) %>-${nextId++}`;
  protected readonly value = signal(40);
  protected readonly isComplete = computed(() => this.value() >= 100);

  readonly label = input('Uploading file');
  readonly completeLabel = input('Done');
  readonly advanceLabel = input('Simulate progress');

  protected advance(): void {
    this.value.update((current) => Math.min(100, current + 20));
  }
}