<p class="h4">
  {{'health-page.status' | translate}}:
  <ds-health-status [status]="healthResponse.status" class="d-inline-flex"></ds-health-status>
</p>
<ngb-accordion #acc="ngbAccordion" [activeIds]="activeId">
  @for (entry of healthResponse.components | dsObjNgFor; track entry) {
    <ngb-panel [id]="entry.key">
      <ng-template ngbPanelTitle>
        <div class="w-100 d-flex gap-3 justify-content-between collapse-toggle" (click)="acc.toggle(entry.key)" data-test="component">
          <button type="button" class="btn btn-link p-0" (click)="$event.preventDefault()" [attr.aria-expanded]="acc.isExpanded(entry.key)"
            [attr.aria-controls]="'health-panel-' + entry.key + '-content'">
            {{ getPanelLabel(entry.key) | titlecase }}
          </button>
          <div class="text-end d-flex gap-2">
            <ds-health-status class="me-2" [status]="entry.value?.status"></ds-health-status>
          </div>
        </div>
      </ng-template>
      <ng-template ngbPanelContent>
        <ds-health-component [healthComponent]="entry.value" [healthComponentName]="entry.key"
          [id]="'health-panel-' + entry.key + '-content'" role="presentation">
        </ds-health-component>
      </ng-template>
    </ngb-panel>
  }
</ngb-accordion>
