extends site.pug
include _util.pug

block head
  link(rel="stylesheet", href="/css/dashboard.css")
  script(type="module", src="https://cdn.jsdelivr.net/npm/chart.js@4.4.6/dist/chart.umd.min.js", nonce=nonce)

block content
  if edit
    h1 Edit #{entry.title}
  else
    h1 Your Journal
    p This is where you can log your overall mood every day, and get a glimpse at how your life is going so far!
    p In the near future there will be a magnificient graph that will let you visualize your past entries and your mood trends. You must tay stuned.
  
  form#journal-update(action=edit ? `/journal/${id}/edit` : "/journal/update", method="post")
    if edit
      input(type="hidden", name="action", value="edit", readonly)
    .input
      span Overall mood change (how do you feel compared to yesterday?)
      +ovm(entry)
    .input
      label(for="title") Title
      input(type="text", name="title", id="title", placeholder="max 64 chars", maxlength="64", value=edit ? entry.title : "")
    .input
      label(for="description") Journal entry for today
      textarea(name="description", id="description", placeholder="max 4096 chars", maxlength="4096", cols="60", rows="12")
        if edit
          | #{entry.entry}
    .input
      span Visibility
      - const v = entry?.visibility ?? 1
      div#visibility-control
        input(type="radio", name="visibility", id="visibility-public", value="1", checked=(v === 1))
        label(for="visibility-public") Public
        br
        input(type="radio", name="visibility", id="visibility-private", value="0", checked=(v === 0))
        label(for="visibility-private") Private
        br
        input(type="radio", name="visibility", id="visibility-moodChange-only", value="2", checked=(v === 2))
        label(for="visibility-moodChange-only") Mood only

    button(type="submit")= edit ? "Edit" :  "Submit"