include ../mixins/comment
include ../mixins/header
include ../mixins/head
include ../utils

doctype html
html
  +head()
  script.
    function toggleDetails(details_id) {
      var detailsElement = document.getElementById(details_id);
      if (detailsElement) {
        detailsElement.open = !detailsElement.open;
      }
    }

  body
    main#content
      +header()
      div.hero
        h3.sub-title
          a(href=`/r/${post.subreddit}`) ← r/#{post.subreddit}

        h2 #{post.title}

        if post.is_gallery && post.is_gallery == true
          if post.gallery_data
            if post.gallery_data.items
              div.gallery
                - var total = post.gallery_data.items.length
                - var idx = 0
                each item in post.gallery_data.items
                  - var url = `https://i.redd.it/${item.media_id}.jpg`
                  div.gallery-item
                    a(href=`/media/${url}`)
                      img(src=url loading="lazy")
                    div.gallery-item-idx
                      | #{`${++idx}/${total}`}
        else if post.post_hint == "image" && post.thumbnail && post.thumbnail != "self" && post.thumbnail != "default"
          img(src=post.url).post-media
        else if post.post_hint == 'hosted:video'
          - var url = post.secure_media.reddit_video.dash_url
          video(controls data-dashjs-player src=`${url}`).post-media
        else if !post.selftext
          a(href=post.url)
            | #{post.url}

        if post.selftext_html
          p.self-text !{post.selftext_html}

        div.info-container 
          p
            | #{fmtnum(post.ups)} ↑ 
            |  ·  by u/#{post.author} 
            |  ·  
            | #{timeDifference(Date.now(), post.created * 1000)}

        hr

      div.comments-container
        each child in comments
          +comment(child, true)

    script(src='https://unpkg.com/htmx.org@1.9.10')