/-  c=tlon-channels
/+  sr=sortug, kaji, sigil=sigil-sigil, lib=boke
=<  html
|%
++  css  ^~  %-  trip
'''
#chat-box{
  height: 100%;
  width: 100%;
  border: 1px solid var(--text-color);
  display: flex;
  flex-direction: column;

  input[type=text]{
    outline: none;
  }

  header{
    border-bottom: 1px solid var(--text-color);
    display: flex;
    padding: 0.5rem 2rem;

    h3{
      margin: 0;
    }
  }
}
#chat-container{
  flex-grow: 1;
  overflow-y: scroll;
  word-break: break-all;
  padding: 0.5rem;
  

  .chat-msg {
    display: flex;
    min-height: 4rem;

    .left {
      margin-right: 1rem;

      & .anon-avatar{
        width: 32px;
        height: 32px;
      }
    }
    .right {
      width: 100%;
      .metadata {
        display: flex;
        color: rgb(100, 100, 100);
        font-size: 0.8rem;

        .author{
          font-family: "Anonymous Pro";  
          margin-right: 0.5rem;
        }
      }
      .chat-content{
        font-family: Inter;
      }
    }
  }
}
#chat-container .chat-content img{
  max-width: 80%;
  display: block;
  margin: 0 auto;
}
#chat-composer{
  display: flex;
}
#text-input{
  flex-grow: 1;
}
.row{
  display: flex;
}
.f1{
  display: flex;
  justify-content: space-between;
}
'''
++  script  ^~  %-  trip
'''
document.addEventListener('DOMContentLoaded', (event) => {
  const room = document.getElementById("chat-container");
  if (room) room.scrollTop = room.scrollHeight
})

document.addEventListener('kaji-fact', (event) => {
  const room = document.getElementById("chat-container");
  if (room) setTimeout(() => room.scrollTop = room.scrollHeight, 50)
})
'''
++  post-to-manx
|=  post=@t
;div.chat-msg
  ;p:"(trip post)"
==
++  html
  |=  =bowl:gall  ^-  manx
  =/  pat  /chat/(scot %p our.bowl)/chat/posts/newest/200/post
  =/  io  ~(. io:sr bowl)
  =/  scrying  (scry:io %channels pat paged-posts:c)
  =/  chat-list  (tap:on-posts:c posts.scrying)
  ;div#chat-box
    ;style:"{css}"
    ;script:"{script}"
    ;header.f1
      ;h3: Bloody Shovel Public Chat
      ;div: ~hostyr-docteg-mothep/spandrell
    ==
    ;div#chat-container
      ;*  %+  turn  chat-list  |=  [=time up=(unit post:c)]  
        ?~  up  ;p:"Deleted post"
        (tlon-chat-post-to-manx:lib u.up)
    ==
    ;form
      =id  "chat-composer"
      =kaji  "poke"
      =action  "add-chat"
      ;input#text-input(type "text", name "input", autocomplete "off");
      ;input(type "submit", value "Submit");
    ==
  ==
--