include ../utils
include postUtils
mixin post(p, currentUrl)
  - var from = encodeURIComponent(currentUrl)
  - var viewQuery = query && query.view ? query.view : 'compact'
  - var sortQuery = query && query.sort ? query.sort + (query.t ? '&t=' + query.t : '') : 'hot'
  article(class=`post`)
    div.post-container(class=`${query.view} ${p.stickied?"sticky":""}`)
      div.post-info
        div.post-text(class=`${query.view}`)
          div.title-container(class=`${query.view}`)
            a(class=`${query.view}`, href=`/comments/${p.id}?from=${from}&sort=${sortQuery}&view=${viewQuery}`)
              != p.title
            span.domain   (#{p.domain})
          div.info-container 
            p
              | #{fmtnum(p.ups)} ↑ 
              if p.gilded > 0
                |  · 
                span.gilded
                  | #{p.gilded} ☆
              span.post-author
                |  · 
                | u/#{p.author} 
              |  · 
              | #{timeDifference(Date.now(), p.created * 1000)}
              |  · 
              a(href=`/r/${p.subreddit}?sort=${sortQuery}&view=${viewQuery}`) r/#{p.subreddit}
              |  · 
              a(href=`/comments/${p.id}?from=${from}&sort=${sortQuery}&view=${viewQuery}`) #{fmtnum (p.num_comments)} ↩
          if (query.view == "card" && !isPostMedia(p) && p.selftext_html)
            div.self-text-overflow.card
              if p.spoiler || p.over_18
                div.spoiler(id=`spoiler_${p.id}`, onclick=`javascript:document.getElementById('spoiler_${p.id}').style.display = 'none';`)
                  h2
                    != p.over_18 ? 'nsfw' : 'spoiler'
              div.self-text.card
                != convertInlineImageLinks(p.selftext_html)
        if query.view != "card"
          div.media-preview
            - var onclick = `toggleDetails('${p.id}')`
            if isPostGallery(p)
              - var item = (p.over_18 ? `/nsfw.svg` : p.spoiler ? `/spoiler.svg` : postGalleryItems(p)[0].url)
              img(src=item onclick=onclick) 
            else if isPostImage(p)
              - var url = postThumbnail(p)
              img(src=url onclick=onclick)
            else if isPostVideo(p)
              - var decodedVideos = decodePostVideoUrls(p)
              video(data-dashjs-player="" playsinline="" autoplay="" muted="" onclick=`toggleDetails('${p.id}')` src=decodedVideos[3] poster=decodedVideos[4] width="100px" height="100px")
            else if isPostLink(p)
              a(href=p.url)
                | ↗

      details(id=`${p.id}` open=(query.view == "card" && (isPostMedia(p) || isPostLink(p))) class=`${query.view}`)
        summary.expand-post expand media
        div.image-viewer
          if query.view == "card" && (p.spoiler || p.over_18) && isPostMedia(p)
            div.spoiler(id=`spoiler_${p.id}`, onclick=`javascript:document.getElementById('spoiler_${p.id}').style.display = 'none';`) 
              h2
                != p.over_18 ? 'nsfw' : 'spoiler'
          if isPostGallery(p)
            div.gallery
              each item in postGalleryItems(p)
                div.gallery-item
                  a(href=`/media/${item.url}`)
                    img(src=item.url loading="lazy")
                  div.gallery-item-idx
                    | #{`${item.idx}/${item.total}`}
          else if isPostImage(p)
            a(href=`/media/${p.url}`)
              img(src=p.url loading="lazy")
          else if isPostVideo(p)
            - var decodedVideos = decodePostVideoUrls(p)
            video(data-dashjs-player="" playsinline="" controls="" muted="" preload="metadata" src=decodedVideos[1] poster=decodedVideos[4])
          else if isPostLink(p)
            a(href=p.url)
              | #{p.domain} ↗
        if (query.view == "compact")
          button(onclick=`toggleDetails('${p.id}')`)
              | close