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-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" && !isPostGallery(p) && !isPostImage(p) && !isPostVideo(p) && p.selftext_html)
          div.self-text-overflow(class='card')
            if query.view == "card" && (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(class='card')
              != convertInlineImageLinks(p.selftext_html)
      div.media-preview(class=`${query.view}`)
        - var onclick = query.view != "card" ? `toggleDetails('${p.id}')` : ``
        if query.view == "card" && (p.spoiler || p.over_18) && (isPostGallery(p) || isPostImage(p) || isPostVideo(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)
          - var item = postGalleryItems(p)[0]
          if query.view == "card"
            div.gallery(class=`${query.view}`)
              each item in postGalleryItems(p)
                div.gallery-item(class=`${query.view}`)
                  a(href=`/media/${item.url}`)
                    img(src=item.url loading="lazy")
                  div.gallery-item-idx(class=`${query.view}`)
                    | #{`${item.idx}/${item.total}`}
          else
            img(src=item.url onclick=onclick) 
        else if isPostImage(p)
          - var url = query.view == "card" ? p.url : postThumbnail(p)
          #{query.view == "card" ? "a href=/media/" + url : span}
            img(src=url onclick=onclick)
        else if isPostVideo(p)
          - var decodedVideos = decodePostVideoUrls(p)
          if query.view == "card"
            video(controls="" muted="" data-dashjs-player="" preload="metadata" poster=decodedVideos[4])
              // HLS
              source(src=decodedVideos[0])
              // Dash
              source(src=decodedVideos[1])
              // Fallback
              source(src=decodedVideos[2])
          else
            video(autoplay="" muted="" data-dashjs-player="" onclick=`toggleDetails('${p.id}')` width="100px" height="100px")
              // Scrubber
              source(src=decodedVideos[3])
        else if isPostLink(p)
          a(href=p.url)
            if (query.view == 'card')
              | #{p.domain} 
            | ↗

    if query.view == "compact" && (isPostGallery(p) || isPostImage(p) || isPostVideo(p))
      details(id=`${p.id}`)
        summary.expand-post expand media
        div.image-viewer
          if isPostGallery(p)
            div.gallery
              each item in postGalleryItems(p)
                div.gallery-item
                  div.gallery-item-idx
                    | #{`${item.idx}/${item.total}`}
                  a(href=`/media/${item.url}`)
                    img(src=item.url loading="lazy")
          else if isPostImage(p)
            a(href=`/media/${p.url}`)
              img(src=p.url loading="lazy").post-media
          else if isPostVideo(p)
            video(controls="" muted="" data-dashjs-player="" preload="metadata" playsinline="" poster=decodedVideos[4] objectfit="contain" loading="lazy").post-media
                //HLS
                source(src=decodedVideos[0])
                // Dash
                source(src=decodedVideos[1])
                // Fallback
                source(src=decodedVideos[2])
          button(onclick=`toggleDetails('${p.id}')`)
              | close