/-  tp=trill-post
/+  plib=trill-utils, sr=sortug, kaji, lib=boke
/=  content  /web/components/post-text
/=  post-header  /web/components/post-header
|_  [[=post:tp children=full-graph:tp] who=@p]
++  css  ^~  %-  trip
'''
#post-text{
    -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;
    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;
}
#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{
    -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;
}
'''
++  script  %-  trip
'''
document.addEventListener('alpine:init', () => {
  console.log(Alpine, Date.now())
  Alpine.store("comment", {
    text: "",
    set(s){
      this.text = s
    }
  });
  Alpine.store("replying_to", {
    show(s){
      return this.to === s
    },
    to: "",
    open(s){
      this.to = s
    }
  });
  Alpine.bind('bigReplyButton', () => ({
    type: 'button',
    'x-on:click'(){
      Alpine.store('replying_to').open('main');
    }
  }));
  Alpine.bind('ReplyButton', () => ({
    type: 'button',
    'x-on:click'() {
      Alpine.store("replying_to").open(this.$el.id)
    }
  }));
  Alpine.bind("cancelButton", () => ({
    'x-on:click'() {
      Alpine.store("replying_to").open("")
    }
  }))
  Alpine.bind("collapseButton", () => ({
    'x-on:click'() {
      Alpine.store("replying_to").open("")
    }
  }))
})
'''
++  post-content  
^-  manx
;div#post-text
  ;style:"{css}"
  ;*  (content contents.post)
==
++  comments
=/  cs  (tap:form:tp children)
=/  l  (houyi:plib children)
=/  length  ?:  .=(0 l)  "No"  "{<l>}"
=/  js  "$store.replying_to.show('main')"
^-  manx
;div#comments
  ;a/"/board/p/{(board-path:lib post)}":"Switch to Board View"
  ;h3:"{length} comments"
  ;span.fl(x-bind "bigReplyButton"):"Leave a reply"
  ;div(x-show js)
    ;+  (reply-box-f [author.post id.post])
  ==
  ;ul.comment-list
    =id  "children{(scow %ud id.post)}"
    ;*  (turn cs comment)
  ==
==
++  grandchildren
|=  p=full-node:tp  ^-  manx
=/  cs  (tap:form:tp children.p)
;ul.comment-list
  =id  "children{(scow %ud id.p.p)}"
  ;*  (turn cs comment)
==
++  comment
|=  [=pid:tp [p=post:tp c=full-graph:tp]]
^-  manx
=/  author  (get-name:lib -.pid)
=/  time  (datetime-to-tape:string:sr id.pid "/")
=/  id=tape  "{<`@ud`id.pid>}"
=/  js=tape  "$store.replying_to.show('{id}')"
:: =/  uncollapse=manx  ;span.cp(x-bind "collapseButton"):"[+] ({<(houyi p)>})"
:: =/  collapse  ;span.cp(x-bind "collapseButton"):"[-]"
;li
  =id  "comment{id}"
  ;div.comment-meta
    ;div.row
      ;a.comment-author/"/u/{author}":"{author}"
    ; |
    ;a.comment-time/"{time}":"{time}"
    ; |
    ==
  ==
  ;div.comment-content
    ;*  (content contents.p)
  ==
  ;div(x-show js)
    ;+  (reply-box-f pid)
  ==
  ;span.fl.reply-prompt(id id, x-bind "ReplyButton"):"reply"
  ;+  (grandchildren [p c])
==
++  reply-box-f
|=  =pid:tp
?:  .=(%pawn (clan:title who))
;p#respond:"You must login with an Urbit ID to comment"
(reply-box pid)
++  reply-box  
|=  =pid:tp
^-  manx
=/  post-meta  (enc:kaji [[author.post id.post] pid])
=/  parent-id=tape  "{<`@ud`id.pid>}"
=/  author  %-  trip  (scot %p who)
;div#respond
  ;span
    =id  "cancel-reply"
    =class  "fl"
    =x-bind  "cancelButton"
    ;  Cancel reply
  ==
  ;form#reply-form
    =kaji  "poke"
    =action  "add-post"
    ;label(for "comment");
    ;textarea#comment
      =name  "comment"
      =cols  "45" 
      =rows  "8"
      =maxlength  "6552"
      =autocomplete  "off"
      ;  
    ==
    ;div#author-data 
      ;span:"Posting as "
      ;span:"{author}"
    ==
    ;input(type "hidden", name "post-meta", value post-meta);
    ;input#submit-comment(type "submit", value "Poast");
  ==
==
++  html  ^-  manx
~&  post
~&  >>  children
  ;div
    ;+  (post-header post)
    ;+  post-content
    ;+  comments
    ;script:"{script}"
  ==
--