<ng-container>
  <bit-callout
    *ngIf="data.callout && !hideCallout"
    [type]="data.callout.severity"
    [title]="data.callout.header"
  >
    <p>{{ data.callout.body }}</p>
    <button
      *ngIf="data.callout.showReinstatementButton"
      bitButton
      [buttonType]="data.callout.severity"
      [bitAction]="requestReinstatement"
      type="button"
    >
      {{ "reinstateSubscription" | i18n }}
    </button>
  </bit-callout>
  <dl class="tw-grid tw-grid-flow-col tw-grid-rows-2">
    <dt>{{ "billingPlan" | i18n }}</dt>
    <dd>{{ planName }}</dd>
    <ng-container *ngIf="data.status && data.date">
      <dt>{{ data.status.label }}</dt>
      <dd>
        <span class="tw-capitalize">
          {{ displayedStatus }}
        </span>
      </dd>
      <dt>
        {{ data.date.label | titlecase }}
      </dt>
      <dd>
        {{ data.date.value | date: "mediumDate" }}
      </dd>
    </ng-container>
  </dl>
</ng-container>
