@if (tags()?.length) {
  <mat-card appearance="outlined">
    <mat-card-content>
      <h3 class="body-text-strong">Tags</h3>
      @for (tag of tags(); track tag.key) {
        <p class="top-value caption-text">
          <span class="key">{{ tag.key }}</span>
          <span>
            {{ tag.topValues[0].value }}: {{ tag.topValues[0].percentRounded }}%
          </span>
        </p>
        <div>
          <div class="bars">
            @for (topValue of tag.topValues; track topValue.name) {
              <span
                class="bar"
                [ngStyle]="{
                  'width.%': topValue.percentRounded,
                }"
                matTooltip="
            {{ topValue.value }} - {{ topValue.percentRounded }}%
          "
                matTooltipPosition="left"
              ></span>
            }
            <span
              class="bar"
              [ngStyle]="{
                'width.%': tag.other,
              }"
              matTooltip="
          Other - {{ tag.other }}%
        "
              matTooltipPosition="left"
            ></span> </div
        ></div>
      }
    </mat-card-content>
  </mat-card>
}