@if (selectedChannel(); as chatChannel) {
  <div class="full-width"
       [style.background-color]="getServerColor(chatChannel.name)">
  <span class="channel" [style.color]="getServerTextColor(chatChannel.name)">
    @for (segment of getDisplayName(chatChannel); track $index) {
      <span [style.color]="segment.color">{{ segment.text }}</span>
    }
    <span class="message-count">({{ chatChannel.totalMessages }})</span>
  </span>
    <div class="user-list-toggle" (click)="toggleUserList()" [class.active]="userListVisible()">
      <svg-users [style.color]="getServerTextColor(chatChannel.name)"/>
      @if (isMobile()) {
        <span [style.color]="getServerTextColor(chatChannel.name)">
          {{ userListVisible() ? 'Channels' : 'Users' }}
        </span>
      }
    </div>
    <div class="notification-icon">
      @if (notificationEnabled()) {
        <svg-notification-enabled (click)="disableNotifications()" [style.color]="getServerTextColor(chatChannel.name)"/>
      } @else {
        <svg-notification-disabled (click)="enableNotifications()" [style.color]="getServerTextColor(chatChannel.name)"/>
      }
    </div>
  </div>
}