<div
  class="tw-flex tw-flex-col tw-gap-4 tw-border tw-rounded-xl tw-border-solid tw-border-secondary-100 tw-p-6"
  data-testid="trend-widget-card"
>
  <div class="tw-flex tw-justify-between tw-items-center">
    <h2>{{ "riskOverTime" | i18n }}</h2>
    <div>
      <button
        type="button"
        bitIconButton="bwi-download"
        [label]="'downloadChart' | i18n"
        [bitMenuTriggerFor]="downloadMenu"
      ></button>
      <bit-menu #downloadMenu>
        <button type="button" bitMenuItem (click)="downloadAsPNG()">PNG</button>
        <button type="button" bitMenuItem (click)="downloadAsCSV()">CSV</button>
      </bit-menu>
    </div>
  </div>
  <div class="tw-flex tw-justify-between tw-items-center tw-flex-wrap tw-gap-4">
    <div class="tw-min-w-0 tw-overflow-x-auto">
      <bit-toggle-group
        [selected]="selectedView()"
        (selectedChange)="onViewChange($event)"
        [label]="'filterRiskOverTime' | i18n"
      >
        <bit-toggle [value]="ViewType.Applications">{{ "applications" | i18n }}</bit-toggle>
        <bit-toggle [value]="ViewType.Passwords">{{ "passwords" | i18n }}</bit-toggle>
        <bit-toggle [value]="ViewType.Members">{{ "members" | i18n }}</bit-toggle>
      </bit-toggle-group>
    </div>
    <dirt-period-selector (selectedPeriodChange)="onTimespanChange($event)"></dirt-period-selector>
  </div>
  <div class="tw-relative tw-h-96">
    @if (loading()) {
      <div class="tw-flex tw-items-center tw-justify-center tw-h-full">
        <bit-icon
          name="bwi-spinner"
          class="bwi-spin bwi-3x tw-text-muted"
          aria-hidden="true"
        ></bit-icon>
      </div>
    } @else if (error()) {
      <div class="tw-flex tw-items-center tw-justify-center tw-h-full tw-text-danger">
        <div class="tw-text-center">
          <bit-icon class="bwi-3x" name="bwi-error" aria-hidden="true"></bit-icon>
          <p class="tw-mt-4">{{ error() }}</p>
        </div>
      </div>
    } @else {
      <line-chart [lines]="lineChartData()" [configuration]="lineChartConfiguration()"></line-chart>
    }
  </div>
</div>
