/-  tp=trill-post
/+  plib=trill-utils, sr=sortug, kaji, lib=boke, const=constants
/=  post-text    /web/components/post-text
/=  post-header  /web/blog/post-header
|_  [[t=thread:tp =post:tp children=full-graph:tp] =bowl:gall is-mobile=?]
++  css  ^~  %-  trip
'''
#post-text{
    -webkit-locale: "en";
    text-size-adjust: 100%;
    color: rgb(0, 0, 0);
    line-height: 1.618;
    text-shadow: rgb(0, 0, 0) 0px 0px 0px;
    border-bottom-color: rgb(223, 223, 223);
    border-bottom-style: dotted;
    border-bottom-width: 1px;
    box-sizing: border-box;
    display: block;
    margin-bottom: 24px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    padding-bottom: 40px;
    padding-left: 32px;
    padding-right: 32px;
    padding-top: 4px;
}
@media (max-width: 800px){
  #post-text{
    padding: 0;
    line-height: 1.2;
  }
}
#comments{
    -webkit-locale: "en";
    text-size-adjust: 100%;
    color: rgb(0, 0, 0);
    line-height: 1.618;
    text-align: left;
    text-shadow: rgb(0, 0, 0) 0px 0px 0px;
    box-sizing: border-box;
    display: block;
    margin-bottom: 32px;
    padding-bottom: 0px;
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 0px;
}
#comments h3{
    -webkit-locale: "en";
    text-size-adjust: 100%;
    color: rgb(0, 0, 0);
    text-align: left;
    text-shadow: rgb(0, 0, 0) 0px 0px 0px;
    font-size: 18.72px;
    font-weight: 400;
    box-sizing: border-box;
    display: block;
    line-height: 1.2;
    margin-block-end: 9.36px;
    margin-block-start: 9.36px;
    margin-bottom: 9.36px;
    margin-inline-end: 0px;
    margin-inline-start: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 9.36px;
}
.comment-list{
    -webkit-locale: "en";
    text-size-adjust: 100%;
    color: rgb(0, 0, 0);
    line-height: 1.618;
    text-align: left;
    text-shadow: rgb(0, 0, 0) 0px 0px 0px;
    box-sizing: border-box;
    display: block;
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
    margin-block-end: 24px;
    margin-block-start: 0px;
    margin-bottom: 24px;
    margin-inline-end: 0px;
    margin-inline-start: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    padding-inline-start: 0px;
    padding-left: 0px;
}
.comment-list li{
    position: relative;
    -webkit-locale: "en";
    text-size-adjust: 100%;
    color: rgb(0, 0, 0);
    line-height: 1.618;
    text-shadow: rgb(0, 0, 0) 0px 0px 0px;
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
    border-left-color: rgb(223, 223, 223);
    border-left-style: solid;
    border-left-width: 1px;
    box-sizing: border-box;
    display: list-item;
    padding-bottom: 16px;
    padding-left: 10px;
    padding-right: 0px;
    padding-top: 16px;
    text-align: left;
}
.comment-author{
  font-weight: 700;
  color: var(--text);
  font-style: normal;
  font-size: 1rem;
  margin-right: 1rem;
}
.comment-content{
  font-size: 90%;
}
#reply-title{
  display: inline;
}
.reply-prompt{
  color: var(--hong);
  font-size: 0.9rem;
}
.nested{
  padding-left: 1rem;
}
#reply-box{
  & textarea{
    width: 100%;
  }
  .author-data{
    display: flex;
    justify-content: space-between;

    & .name{
      margin-left: 1rem;
    }
  }
}
/* desktop */
@media (min-width: 800px){
  #reply-box{
    width: 40%;
  }
}
/* mobile */
@media (max-width: 800px){
  #reply-box{
    width: 100%;
  }
}
.collapse-button, .uncollapse-button{
  width: 15px;
  position: absolute;
  left: -10px;
  top: 21px;
}
'''
++  script  ^~  %-  trip
'''
function scanTweets(){
  const nodes = document.querySelectorAll(".parsed-twatter");
  for (let n of nodes){
    const status = n.getAttribute("status");
    twttr.widgets.createTweet(status, n.parentElement, {
      conversation: true
    })
  }
}
window.addEventListener('load', () => {
  scanTweets();
})
'''
++  post-content  
^-  manx
;div#post-text
  ;style:"{css}"
  ;*  (content:post-text contents.post)
==
++  comments
=/  =pid:tp  [author.post id.post]
=/  board-path  (trip (spat (board-path:lib t)))
=/  l  (lent replies.t)
=/  length  ?:  .=(0 l)  "No"  "{<l>}"
=/  js  "$store.replying_to.show('main')"
^-  manx
;div#comments
  ;a/"{board-path}":"Switch to Board View"
  ;h3:"{length} comments"
  ;div#big-reply
    ;span.fl
      =kaji  "scry"
      =path  "/blog/f/reply/{(enc:kaji [pid pid])}"
      =swap  "add"
      =cont  "#big-reply"
     ; Leave a reply
    ==
  ==
  ;+  comment-list  
==
++  comment-list  ^-  manx
=/  cs  (tap:form:tp children)
;div#comments-wrapper
  ;ul#comments-top.comment-list
    =id  "children{(scow %ud id.post)}"
    ;*  (turn (flop cs) comment)
  ==
==

++  comment
=|  nested=@ud
|=  [=pid:tp [p=post:tp c=full-graph:tp]]
^-  manx
=/  author  (get-name:lib -.pid)
=/  full-time  (datetime-to-tape:string:sr id.pid "/")
=/  time  ?.  is-mobile  full-time
                         (post-date-ago:lib id.pid now.bowl %tam)

=/  id=tape  (enc:kaji pid)
=/  js=tape  "$store.replying_to.show('{id}')"
=/  post-meta  (enc:kaji [[author.post id.post] pid])
=/  permalink  ""
;li
  =id  "comment-{id}"
  ;img.collapse-button
    =src   "https://s3.spandrell.ch/assets/board/ui/collapse.svg"
    =kaji  "toggle"
    =targ  ".comment-proper/.uncollapse-button/.collapse-button"
    ;
  ==
  ;img.uncollapse-button
    =src  "https://s3.spandrell.ch/assets/board/ui/uncollapse.svg"
    =kaji  "toggle"
    =targ  ".comment-proper/.uncollapse-button/.collapse-button"
    =hidden  ""
    ;
  ==
  ;div.comment
    ;div.comment-meta
      ;div.row
        ;a.comment-author/"/u/{author}":"{author}"
      ; |
      ;a.comment-time
        =title  "{time}"
        =href   permalink
        ; {time}
        ==
      ;*  ?.  (is-admin:lib src.bowl)  ~
          ;=  ;span:"|"
              ;a
                =kaji  "poke"
                =action  "del-comment"
                =name     "pid"
                =payload  id
                ; Nuke
              ==
          ==
      ==
    ==
    ;div.comment-proper
      ;div.comment-content
        ;*  (content:post-text contents.p)
      ==
      ;span.fl.reply-prompt
        =id    id
        =kaji  "scry"
        =path  "/blog/f/reply/{post-meta}"
        =swap  "swap"
        =targ  ".reply-box"
        ; reply
      ==
      ;div.reply-box;
      ;+  (grandchildren [p c] +(nested))
    ==
  ==
==
++  shit
=|  nested=@ud
|=  a=@ud  %lol

++  grandchildren
|=  [p=full-node:tp nested=@ud]  ^-  manx
=/  cs  (tap:form:tp children.p)
=/  c  (houyi:plib children.p)
=/  count  (scow:parsing:sr %ud c)

?:  ?&  (gth (lent cs) 0)  (gth nested 5)  is-mobile  ==
  =/  pids  [[author.post id.post] [author.p.p id.p.p]]
  =/  path  "/blog/f/subthread/{(enc:kaji pids)}"
  ;a
    =kaji  "scry"
    =path  path
    =swap  "swap"
    =targ  "#comments-wrapper"
    ; Show {count} more comments
  ==
=/  id=tape  (enc:kaji [author.p.p id.p.p])
=/  newcomms  comment  ::  need to tisfas it to be able to manipulate the optional variable
                       ::  I don't get it
;ul.comment-list.nested
  =id  "children-{id}"
  ;*  (turn (flop cs) newcomms(nested nested))
==
++  comment-subthread
|=  fn=full-node:tp
=/  cs  (tap:form:tp children.fn)
=/  ocs  (tap:form:tp children)
=/  c  (houyi:plib children.fn)
=/  oc  (houyi:plib children)
=/  count  (scow:parsing:sr %ud c)
=/  total  (scow:parsing:sr %ud oc)
=/  =pid:tp  [author.post id.post]
;div#subthread
  ;div
    ;p:"Showing {count} comments of {total}"
    ;a
      =kaji  "scry"
      =path  "/blog/f/comments/{(enc:kaji pid)}"
      =swap  "swap"
      =targ  "#comments-wrapper"
     ; Go back to top
    ==
  ==
  ;div#comments-top.comment-list
    =id  "children{(scow %ud id.post)}"
    ;*  (turn (flop cs) comment)
  ==
==


++  html  ^-  manx
  ;div.blog
    ;+  (post-header t src.bowl)
    ;+  post-content
    ;+  comments
    ;script:"{script}"
  ==
--