@CustomComponent({
  selector: 'app-session-pool-list',
  parent: BasePageSectionComponent,
  template: (parentTemplate) => {
    return `
      ${parentTemplate}
      <ng-template #sectionContentTemplate let-type>
        <div>
          <button
            type="button"
            class="btn btn-default"
            (click)="createNewPool()">Create New Pool</button>
        </div>
        <div class="table-head-row table-row col-sm-12">
          <app-table-head
            [title]="'Description'"
            ></app-table-head>
          <app-table-head
            [title]="'State'"
            ></app-table-head>
          <app-table-head
            [title]="'# Of Sessions'"
            ></app-table-head>
        </div>
        <div class="table-content-row table-row col-sm-12">
          <div
            *ngFor="let session of sessionPool; let i = index">
              <app-table-cell
                [content]="session.description"
                ></app-table-cell>
              <app-table-cell
                [content]="session.state"
                ></app-table-cell>
              <app-table-cell
                [content]="i"
                ></app-table-cell>
          </div>
        </div>
      </ng-template>
    `;
  }
})

export class SessionPoolListComponent extends BasePageSectionComponent implements OnInit {
  private sessionPool;
  constructor(
    private injector: Injector,
    private sessionsService: SessionRecorderService
  ) {
    super();
  }

  ngOnInit() {
    super.inject(this.injector);
    this.sessionsService.fetchAll().then((res) => {
      this.sessionPool = res;
    });
  }

  createNewPool(event: Event) {
    event.preventDefault();
    event.stopImmediatePropagation();
  }
}