<style>
  .channel-list-item-highlight {
    /* xxx */
  }
</style>
<aside class="sidebar" id="channelSidebar">
    
    <h2 class="no-select">Terminals</h2>
    <ul>
        <li><a class="no-select" href="/terminal.html">Ubuntu</a></li>
    </ul>

    {% if channels %}
    <h2 class="no-select">Channels <a href="#" class="sidebar-add-btn" onclick="event.preventDefault(); showCreateChannel();" title="Create channel">+</a></h2>
    <ul>
      {% for channel in channels if not channel['is_private'] %}
      <li id="channel-list-item-{{channel['uid']}}"><a class="no-select" {% if channel['color'] %}style="color: {{channel['color']}}"{% endif %}  href="/channel/{{channel['uid']}}.html">{{channel['name']}} <span class="message-count">{% if channel['new_count'] %}({{ channel['new_count'] }}){% endif %}</span></a></li>
      {% endfor %}
    </ul>
    <h2 class="no-select">Private</h2>
    <ul>
      {% for channel in channels if channel['is_private'] %}
      <li id="channel-list-item-{{channel['uid']}}"><a  {% if channel['color'] %}style="color: {{channel['color']}}"{% endif %}  class="no-select" href="/channel/{{channel['uid']}}.html">{{channel['name']}} <span class="message-count">{% if channel['new_count'] %}({{ channel['new_count'] }}){% endif %}</span></a></li>
      {% endfor %}
    </ul>
    {% endif %}
  </aside>
  <script>
    class ChannelSidebar {
        constructor(el){
          this.el = el 
        }
        async init(){
            
            const channels = await window.app.rpc.getChannels()
            channels.forEach(channel => {
                if(channel.color){
                this.setMessageCount(channel.uid, channel.new_count)
                this.setColor(channel.uid, channel.color)
                }
            })
        }
        get channelNodes() {
          return this.el.querySelectorAll("li")
        }
        channelListItemByUid(channelUid){
          const id = "channel-list-item-" + channelUid;
          return document.getElementById(id)
        }
        incrementMessageCount(channelUid){
          let messageCount = this.getMessageCount(channelUid)
          messageCount++;
          this.setMessageCount(channelUid, messageCount)
        }
        getMessageCount(channelUid){
          const li = this.channelListItemByUid(channelUid);
          if(li){
            let messageCount = li.dataset['messageCount']
            if(!messageCount){
              return 0
            }
            return new Number(messageCount)
          }
        }
        setMessageCount(channelUid, count){
            
            const li = this.channelListItemByUid(channelUid);
          if(li){
            li.dataset.messageCount = new String(count)
            li.dataset['messageCount'] = count
            if(!count){
                li.querySelector(".message-count").textContent = ''
            }else{
              li.querySelector(".message-count").textContent = '(' + count + ')'
            }
          }
        }
        setColor(channelUid, color){
          const li = this.channelListItemByUid(channelUid);
            if(li){
                li.querySelector("a").style.color = color
          }
        }
        notify(message){
          const li = this.channelListItemByUid(message.channel_uid);
          if(li){
            this.incrementMessageCount(message.channel_uid)
            li.classList.add("channel-list-item-highlight")
            li.querySelectorAll("a").forEach(el=>{
              el.style.color = message.color
            })
          }
        }

    }
    const channelSidebar = new ChannelSidebar(document.getElementById("channelSidebar"))

    document.addEventListener("DOMContentLoaded", () => {
    channelSidebar.init()
    })
  </script>