/-  boke, tp=trill-post, cnt=contact
/+  sr=sortug, plib=trill-utils, sigil=sigil-sigil, lib=boke, kaji, const=constants
/=  board  /web/board/index
|_  [s=state:boke =bowl:gall]
++  css  ^~  %-  trip
'''
#board-index{
  margin-top: 1rem;
  .tabs{
    width: 50%;
    margin: auto;

    & .tab.active{
      font-weight: 700;
    }
  }
    & #board-list{
      input{
        display: block;
        margin: auto;
      }
    }
    & #board-list-inner {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
  
      & .board{
        display: block;
        cursor: pointer;
        padding: 1rem 0;
        border: 1px solid var(--text-color);
        margin: 0.3rem;
        width: 20%;
        text-align: center;
        & .hanzi{
         font-size: 50px;
          margin: 0;
          color: var(--text-color); 
        }
        & h4{
          word-break: keep-all;
          text-align: center;
        }

        & img{
          width: 50px;
          display: block;
          margin: 0 auto 0.5rem auto;
        }
      }
      & .entry{
        display: flex;
        flex: 0 0 33%;
        align-items: center;
        padding: 0.5rem 1rem;

        & h4{
          margin-right: 0.2rem;
        }
      }
  }

}
#board{
  display: block;
}
  #board-index{
   .board{
    width: unset;
  }
    & h4{
      font-size: 1rem;
    }
  }
  #tag-search{
    margin-bottom: 1rem;
  }
'''
++  $
:: =/  latest  (bot:gorrm:tp feed.s 10)
;div#board-index
  ;style: {css}
  ;h2.tc:"Forum"
  ;div.tabs
    :: ;div.tab
    ::   =path  "/board/latest"
    ::   ; Latest
    :: ==
    ;div.tab.active
      =kaji  "scry"
      =swap  "swap"
      =targ  "#board-list-inner"
      =path  "/board/ff/boards"      
      ; Categories
    ==
    ;div.tab
      =kaji  "scry"
      =swap  "swap"
      =targ  "#board-list"
      =path  "/board/ff/tags"      
      ; Tags
    ==
  ==
  ;div#board-list
  ;div#board-list-inner
    ;*  category-list
  ==
  ==
  ;+  big-button:board
==
++  category-list  ^-  marl
    :-  
    ;a.board/"/board/all"
    ;div
      ;h3.hanzi: 全
      ;h4: All
    ==
    ==
    ;*  %+  turn  ~(tap by categories:const)  |=  [p=@tas *]
      =/  name  (trip p)
      ;a.board/"/board/b/{name}"
      ;div
        ;img@"https://s3.spandrell.ch/assets/board/boards/{name}.svg";
        ;h4: {name}
      ==
      ==
--