include ../mixins/post
include ../mixins/sub
include ../mixins/header
- var subs = []
doctype html
html
  head
    meta(name="viewport" content="width=device-width, initial-scale=1.0")
    meta(charset='UTF-8')
    title reddit
    link(rel='stylesheet', href='/styles.css')
    script(src="https://cdn.dashjs.org/latest/dash.all.min.js")

  +subMgmt()
  script.
    function updateButton(sub) {
      var b = document.getElementById("button-container");
      b.innerHTML = '';

      const button = document.createElement("button");

      if (issub(sub)) {
         button.innerText = "unsubscribe";
         button.onclick = ()=>unsubscribe(sub);
      } else {
         button.innerText = "subscribe";
         button.onclick = ()=>subscribe(sub);
      }
      b.appendChild(button);
    }

    function toggleDetails(details_id) {
      var detailsElement = document.getElementById(details_id);
      if (detailsElement) {
        detailsElement.open = !detailsElement.open;
      }
    }

    document.addEventListener('DOMContentLoaded', ()=>updateButton("#{subreddit}"));
  body
    main#content
      +header()

      div.hero
        a(href=`/r/${subreddit}`)
          h1 r/#{subreddit}
        if about
          p #{about.public_description}
        div#button-container
        ul
          li
            a(href=`/r/${subreddit}/hot`) hot
          li
            a(href=`/r/${subreddit}/top`) top
          li
            a(href=`/r/${subreddit}/top?t=all`) top all

      if posts
        each child in posts.posts
          +post(child.data)
        div.footer
          div.footer-item
            a(href=`/r/${subreddit}?after=${posts.after}`) next →