<div class="channel-list">
  <p>Channels</p>
  <div class="scroll">
    @for (group of groupedChannels(); track group.type) {
      <p class="channel-group-title" (click)="toggleGroup(group.type)">
        {{ group.type }} {{ collapsedGroups().has(group.type) ? '▼' : '▲' }}
      </p>
      @if (!collapsedGroups().has(group.type)) {
        @for (channel of group.channels; track channel.name) {
          <div class="channel indented"
               [class.selected]="selectedChannel()?.name === channel.name && selectedChannel()?.type === channel.type"
               (click)="selectedChannelChange.emit(channel)">
          <span class="channel-name">
            @for (segment of getDisplayName(channel); track $index) {
              <span [style.color]="segment.color">{{ segment.text }}</span>
            }
          </span>
            @if (channel.unreadMessages > 0) {
              <div class="notification">
                <svg-circle></svg-circle>
              </div>
            }
          </div>
        }
      }
    }
  </div>
</div>
