<mat-expansion-panel class="hlo-text-view-panel">
  <mat-expansion-panel-header>
    <mat-panel-title> Check HLO Full Text </mat-panel-title>
  </mat-expansion-panel-header>
  <div class="hlo-text-load-button-container">
    <button
        *ngFor="let item of toggleButtonItems"
        mat-flat-button
        color="primary"
        [matTooltip]="item.tooltip"
        (click)="downloadHloText(item.value)"
        class="hlo-text-load-button">
      {{item.text}}
    </button>
  </div>
  <div>
    <div class="progress-container" *ngIf="loading">
      <div class="loading-message">{{loadingMessage}}</div>
      <!-- TODO(go/progressbar-aria): Replace the aria-label with a better description, e.g. "Fetching user data" -->
      <mat-progress-bar color="primary" mode="indeterminate" aria-label="Loading"></mat-progress-bar>
    </div>
      <div class="hlo-text-load-status" *ngIf="hloText && !loading">{{ getDownloadStatusMessage() }}</div>
      <textarea [hidden]="!loading && !hloText" readonly class="hlo-text-area"  aria-label="hlo text area">{{hloText}}</textarea>
  </div>
</mat-expansion-panel>
