extends site.pug

block head
  link(rel="stylesheet", href="/css/dashboard.css")
  style
    | #content { margin-left: 256px; }

block page
  #sidebar
    h1 Profile
    form#dashboard-profile(action=`/users/${user.name}/edit`, method="post")
      textarea(placeholder="bio (max 1024 chars)", maxlength="1024", name="bio", rows=5)= user.bio
      input(type="url", name="website", placeholder="website", value=user.website)
      button(type="submit") Edit
    h1(style="margin-top:1em;") Mood history
    ul#dashboard-mood-history
      for mood of moodHistory
        li
          strong= mood.mood
          |
          | #{mood.date}

block content
  if user.moderator
    details(style="margin-bottom:1em;")
      summary Moderation
      p If you're seeing this, you are part of the exclusive club of moderators! You are now entitled to pizza for the rest of your life! And the ability to ban people and create new moods! For FREE!
  form#dashboard-update-form(action="/update/mood", method="post", onsubmit="disable(this);")
    select(name="mood", required)
      //- Maybe put the index of the mood in the value of the option element
      //- so that indexOf (slow) wont have to be used everytime mood is updated
      for mood of moodsSorted
        option= mood
    textarea(name="desc", placeholder="mood description (max 512 chars)", rows="5", maxlength="512")
    button(type="submit") Update
  h1(style="margin-top:0.5em;") Feed
  include _feed.pug
  +feed(recentUpdates)
  script(nonce=nonce).
    function disable(form) {
      const btn = form.querySelector("button");
      btn.setAttribute("disabled", true);

      setTimeout(() => {
        btn.removeAttribute("disabled");
      }, 3000)
    }