/-  *boke, tp=trill-post, cnt=contact
/+  sigil=sigil-sigil, sr=sortug, wall
/=  user  /web/components/user
|_  [who=@p s=state =bowl:gall]
++  css  ^~  %-  trip
'''
#user{
  margin-top: 1rem;

  & .avatar svg{
    margin: auto;
  }
  .button{
    display: block;
    width: max-content;
    margin: auto;
  }
}
'''
++  script  ^~  %-  trip
'''
  const el = document.getElementById("logout");
  el.addEventListener("click", run);
  async function run(){
    // const res = await fetch("/~/logout?redirect=/");
    const res = await fetch("/~/logout");
    if (res) window.location.href = "/";
    console.log(res, "res")
  }
'''
+$  stats  [count=@ud first=@da last=@da]
++  get-stats  ^-  stats
  %+  roll  (tap:gorm:tp feed.s)  |=  [[=pid:tp *] a=stats]
  ?.  .=(ship.pid who)  a
  =.  count.a  +(count.a)
  =.  first.a  
    ?:  .=(first.a *@da)  id.pid
    ?:  (lth id.pid first.a)  id.pid  first.a
  =.  last.a   ?:  (gth id.pid last.a)   id.pid  last.a
  a
  
++  $
  =/  wal  ~(. wall src.bowl)
  =/  contacts  (get-contacts:cnt bowl)
  =/  usr  (user src.bowl contacts 100)
  =/  is-self  .=(src.bowl who)
  =/  stats  get-stats
  =/  subscription  (subscription-type:wal now.bowl)
  

;div#user.blog
  ;style: {css}
  ;h1.tc: User Profile
  ;+  -.usr
  ;h2.tc
    ;+  +.usr
  ==
  ;+  ?:  .=(0 count.stats)  ;p:"No posts"
  ;div.stats
    ;p: Post Count: {(number:string:sr count.stats)}
    ;p: First post: {(date-to-tape:string:sr first.stats "/")}
    ;p: Latest post: {(date-to-tape:string:sr last.stats "/")}
  ==
  ;*  ?.  is-self  ~
      ;*  ?~  subscription
          ;+  ;a.button/"/subscribe":"Subscribe"  ~
      ;+  ;button#logout.button:"Logout"
  ;script:"{script}"

==
--