<div
  class="d-inline-flex p-1 activity-type-badge"
  [ngClass]="{
    buy: activityType === 'BUY',
    dividend: activityType === 'DIVIDEND',
    fee: activityType === 'FEE',
    interest: activityType === 'INTEREST',
    item: activityType === 'ITEM',
    liability: activityType === 'LIABILITY',
    sell: activityType === 'SELL'
  }"
>
  @if (activityType === 'BUY') {
    <ion-icon name="arrow-up-circle-outline" />
  } @else if (activityType === 'DIVIDEND' || activityType === 'INTEREST') {
    <ion-icon name="add-circle-outline" />
  } @else if (activityType === 'FEE') {
    <ion-icon name="hammer-outline" />
  } @else if (activityType === 'ITEM') {
    <ion-icon name="cube-outline" />
  } @else if (activityType === 'LIABILITY') {
    <ion-icon name="flame-outline" />
  } @else if (activityType === 'SELL') {
    <ion-icon name="arrow-down-circle-outline" />
  }
  <span class="d-none d-lg-block mx-1">{{ activityTypeLabel }}</span>
</div>
