mixin group(name)
  .c-group
    .c-group__icon
    .c-group__name= name

mixin room(name)
  .c-room
    .c-room__icon
    .c-room__name= name

mixin message(name, messages)
  .c-message-group
    .c-message-group__avatar
      .c-message-group__icon
    .c-message-group__messages
      .c-message-group__intro
        .c-message-group__name= name
        .c-message-group__date at 4:20 pm
      each message in messages
        .c-message= message

mixin message-notice(content)
  .c-message-notice
    .c-message-notice__inner= content

mixin message-event(icon, content)
  .c-message-event
    .c-message-event__inner
      img.c-message-event__icon(src=icon, alt="")
      = content

doctype html
html
  head
    meta(charset="utf-8")
    link(rel="stylesheet", type="text/css", href=getStatic('/sass/main.sass'))
    script(type="module", src=getStatic('/js/groups.js'))
    script(type="module", src=getStatic('/js/chat-input.js'))
    script(type="module", src=getStatic('/js/room-picker.js'))
    script(type="module", src=getStatic('/js/sync/sync.js'))
    script(type="module", src=getStatic('/js/chat.js'))
    title Carbon
  body
    main.main
      .c-groups
        #c-groups-display.c-groups__display
          #c-group-marker.c-group-marker
          #c-groups-list.c-groups__container
      #c-rooms.c-rooms
      .c-chat
        #c-chat-messages.c-chat__messages
          #c-chat.c-chat__inner
        .c-chat-input
          textarea#c-chat-textarea.c-chat-input__textarea(
            placeholder="Send a message...",
            autocomplete="off"
          )