import div, h1, ul, li from require 'mmm.dom'
import link_to, find_fileder from (require 'mmm.mmmfs.util') require 'mmm.dom'
import ropairs from require 'mmm.ordered'

=>
  div {
    h1 (link_to @)
    ul do
      posts = for post in *@children
        continue if post\get 'hidden: bool'

        preview = div {
          style: {
            display: 'flex'
            'justify-content': 'space-between'
            'flex-direction': 'column'
            width: '100%'
            height: '100%'
          }

          div (post\get 'preview: mmm/dom'), class: 'embed-cover', style: width: '100%', flex: '1'
          div style: height: '1em'
          (post\get 'title: mmm/dom') or (post\gett 'name: alpha')
        }

        li {
          style: {
            display: 'inline-block'
            position: 'relative'
            flex: '0 1 350px'
            margin: '0.5em'
            padding: '1em'
            background: 'var(--gray-bright)'
          }

          link_to post, preview, nil, style: height: '100%', 'font-weight': 'normal !important'
        }

      posts.style = {
        display: 'flex'
        'flex-wrap': 'wrap'
        padding: '0'
      }

      posts
  }