import { Component, inject } from '@angular/core';
import { RouterModule } from '@angular/router';
import { StatsWsService } from '@frontend/shared/stats-ws';
import { CommonModule } from '@angular/common';

@Component({
  standalone: true,
  imports: [RouterModule, CommonModule],
  selector: 'app-root',
  template: `
    <div>
      <h1>Docker Containers</h1>

      @for (container of containers(); track container.id) {
        <div class="container">
          <h2>{{ container.name }}</h2>
          <p>ID: {{ container.id }}</p>
          <p>Image: {{ container.image }}</p>
          <p>Status: {{ container.status }}</p>
          <p>State: {{ container.state }}</p>
        </div>
      }
    </div>
    <router-outlet></router-outlet>
  `
})
export class AppComponent {
  private readonly service = inject(StatsWsService);
  protected containers = this.service.containers;
}