<div class="container">
  <mat-tab-group
    mat-stretch-tabs
    animationDuration="0ms"
    (selectedTabChange)="onSelectedTabChange($event)"
    class="global-menu"
  >
    <mat-tab [aria-label]="MainMenu.Group">
      <ng-template mat-tab-label>
        <!--<mat-icon>group</mat-icon>-->
        <div
          class="icon-item"
          matTooltip="{{ 'group.label' | translate }}"
          matTooltipPosition="after"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="1.5"
            stroke-linecap="butt"
            stroke-linejoin="round"
          >
            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
            <circle cx="12" cy="7" r="4"></circle>
          </svg>
        </div>
      </ng-template>
    </mat-tab>
    <mat-tab [aria-label]="MainMenu.Chat">
      <ng-template mat-tab-label>
        <div
          class="icon-item"
          [matBadgeHidden]="(badgeChatUnReadCount$ | async) <= 0"
          [matBadge]="badgeChatUnReadCount$ | async"
          matBadgeDescription="{{
            'chat.badgeDescriptionForUnread' | translate
          }}"
          matBadgeColor="accent"
          matBadgePosition="above after"
          matTooltip="{{ 'chat.label' | translate }}"
          matTooltipPosition="after"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="#000000"
            stroke-width="1.5"
            stroke-linecap="butt"
            stroke-linejoin="bevel"
          >
            <path
              d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"
            ></path>
          </svg>
        </div>
      </ng-template>
    </mat-tab>
    <mat-tab [aria-label]="MainMenu.Organization">
      <ng-template mat-tab-label>
        <div
          class="icon-item"
          matTooltip="{{ 'organization.chart' | translate }}"
          matTooltipPosition="after"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="#000000"
            stroke-width="1.5"
            stroke-linecap="butt"
            stroke-linejoin="bevel"
          >
            <circle class="st0" cx="18.4" cy="18.5" r="3" />
            <circle class="st0" cx="12" cy="5" r="3" />
            <path class="st0" d="M12.4,10.5h4c1.1,0,2,0.9,2,2v3" />
            <circle class="st0" cx="6.1" cy="18.5" r="3" />
            <path class="st0" d="M6.1,15.5v-3c0-1.1,0.9-2,2-2h4" />
            <line class="st0" x1="12" y1="8" x2="12" y2="9" />
          </svg>
        </div>
      </ng-template>
    </mat-tab>

    <mat-tab [aria-label]="MainMenu.Message">
      <ng-template mat-tab-label>
        <div
          class="icon-item"
          [matBadgeHidden]="(badgeMessageUnReadCount$ | async) <= 0"
          [matBadge]="badgeMessageUnReadCount$ | async"
          matBadgeDescription="{{
            'message.badgeDescriptionForUnread' | translate
          }}"
          matBadgeColor="accent"
          matBadgePosition="above after"
          matTooltip="{{ 'message.label' | translate }}"
          matTooltipPosition="after"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="#000000"
            stroke-width="1.5"
            stroke-linecap="butt"
            stroke-linejoin="bevel"
          >
            <polygon
              points="21.368 12.001 3 21.609 3 14 11 12 3 9.794 3 2.394"
            />
          </svg>
        </div>
      </ng-template>
    </mat-tab>
  </mat-tab-group>
</div>
