extends site.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
  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="/update/journal", method="post")
    .input
      span Overall mood change (how do you feel compared to yesterday?)
      #ovm
        input.ovm-input(type="radio", name="moodDelta", id="moodDelta-mb", value="2", required)
        label.ovm-input(for="moodDelta-mb", title="Much better")
          img(src="/img/upup.svg", alt="Much better")

        input.ovm-input(type="radio", name="moodDelta", id="moodDelta-b", value="1", required)
        label.ovm-input(for="moodDelta-b", title="Better")
          img(src="/img/up.svg", alt="Better")

        input.ovm-input(type="radio", name="moodDelta", id="moodDelta-nc", value="0", required checked)
        label.ovm-input(for="moodDelta-nc", title="About the same")
          img(src="/img/line.svg", alt="About the same")

        input.ovm-input(type="radio", name="moodDelta", id="moodDelta-w", value="-1", required)
        label.ovm-input(for="moodDelta-w", title="Worse")
          img(src="/img/down.svg", alt="Worse")

        input.ovm-input(type="radio", name="moodDelta", id="moodDelta-mw", value="-2", required)
        label.ovm-input(for="moodDelta-mw", title="Much worse")
          img(src="/img/downdown.svg", alt="Much worse")
    .input
      label(for="title") Title
      input(type="text", name="title", id="title", placeholder="max 64 chars", maxlength="64", style="width:66ch;")
    .input
      label(for="description") Journal entry for today
      textarea(name="description", id="description", placeholder="max 4096 chars", maxlength="4096", cols="60", rows="12")
    .input
      span Visibility
      div#visibility-control
        input(type="radio", name="visibility", id="visibility-public", value="1", checked)
        label(for="visibility-public") Public
        br
        input(type="radio", name="visibility", id="visibility-private", value="0")
        label(for="visibility-private") Private
        br
        input(type="radio", name="visibility", id="visibility-moodChange-only", value="2")
        label(for="visibility-moodChange-only") Mood only

    button(type="submit") Submit