<div class="sky-padding-even-large">
  <sky-description-list mode="vertical">
    @for (item of items; track item) {
      <sky-description-list-content
        [helpPopoverContent]="showHelp ? inlineHelp : undefined"
      >
        <sky-description-list-term>
          {{ item.term }}
          @if (item.showHelp) {
            <sky-help-inline class="sky-control-help" />
          }
        </sky-description-list-term>
        <sky-description-list-description>
          {{ item.description }}
        </sky-description-list-description>
      </sky-description-list-content>
    }
  </sky-description-list>
  <sky-description-list mode="horizontal">
    @for (item of items; track item) {
      <sky-description-list-content
        [helpPopoverContent]="item.showHelp ? inlineHelp : undefined"
      >
        <sky-description-list-term>
          {{ item.term }}
          @if (item.showHelp) {
            <sky-help-inline class="sky-control-help" />
          }
        </sky-description-list-term>
        <sky-description-list-description>
          {{ item.description }}
        </sky-description-list-description>
      </sky-description-list-content>
    }
  </sky-description-list>
</div>
<ng-template #inlineHelp>Help</ng-template>
<button type="button" class="sky-btn sky-btn-default" (click)="toggleHelp()">
  Toggle help {{ showHelp }}
</button>
