log.pug

doctype html
html(lang='en')
  include ./mixins.pug
  head
    if log.name && log.name.length
      title DICE LOGGER – #{log.name}
    else
      title DICE LOGGER – Log ##{log.id}
    meta(name='viewport', content='width=device-width, initial-scale=1')
    link(rel='stylesheet', href='/bulma.css')
    link(rel='stylesheet', href='/fontawesome/css/fontawesome-all.min.css')
    link(rel='stylesheet', href='/dice-logger.css')
  body
    section
      .container
        nav.navbar(role='navigation', aria-label='main navigation')
          .navbar-brand
            a.navbar-item(href='/').title.is-3.is-uppercase Dice Logger
          .navbar-menu
            .navbar-end
              .navbar-item
                form(method='POST', action='/')
                  .field
                    .control.has-text-centered
                      button.button.is-danger.is-5e
                        span.icon
                          i.fas.fa-plus
                        span New Log

    if !edit
      section.hero.is-danger.is-5e
        .hero-body
          .container
            if log.name && log.name.length
              h1.title #{log.name}
            else
              h1.title Log ##{log.id}

    if edit
      section.hero.is-light
        .hero-body
          .container

            form(method='POST', action=`/${log.id}/edit/${log.key}/entries`)
              .field
                label.label Log Message
                .control
                  input.input.is-large(type='text', name='message', value=message, maxlength=1024, autofocus=(!error || !error.length), placeholder='Enter a message to describe this roll for future reference. "My HP roll for level 5."')
              .field
                label.label Dice Roll
                .control
                  input.input.is-monospace(type='text', name='roll', value=(roll || '1d20'), maxlength=8, class={'is-danger': error && error.length}, autofocus=(error && error.length))
                  if error && error.length
                    p.help.is-danger
                      | <strong>This roll is invalid.</strong> 
                      | Look here for help on your dice roll options: 
                      span.icon
                        i.far.fa-question-circle
                      a.has-color-primary(href='/faq#faq-roll-syntax', target='_blank', style='text-decoration: underline;') F.A.Q.
                  else
                    p.help
                      | Look here for help on your dice roll options: 
                      span.icon
                        i.far.fa-question-circle
                      a.has-color-primary(href='/faq#faq-roll-syntax', target='_blank', style='text-decoration: underline;') F.A.Q.
              .field
                .control
                  button.button.is-danger.is-5e
                    span.icon
                      i.fas.fa-cube
                    span Roll!

    section.section
      .container

        if !entries || !entries.length
          article.message.is-black
            .message-header
              p Uh oh!
            .message-body
              p Nothing has been rolled for this log yet!
        else
          each entry in entries
            +entry(entry, moment)
          if entries.length < 100
            .has-text-grey.has-text-centered Showing all #{entries.length} log entries.
          else
            .has-text-grey.has-text-centered Showing most recent 100 log entries.

    if edit
      section.hero.is-light
        .hero-body
          .container

            .has-text-centered.is-size-7.has-text-grey
              div.has-text-weight-bold
                span.icon
                  i.fas.fa-exclamation-triangle
                span Save the URL below so you can add rolls to this log later. Only this URL allows you to add to your log:
                span.icon
                  i.fas.fa-exclamation-triangle
              div
                a(href=`/${log.id}/edit/${log.key}`)
                  span.icon
                    i.far.fa-edit
                  span #{baseUrl}/#{log.id}/edit/#{log.key}
              br
              div.has-text-weight-bold
                span Share your rolls with the world (read-only):
              div
                a(href=`/${log.id}`)
                  span.icon
                    i.far.fa-share-square
                  span #{baseUrl}/#{log.id}
              br

              hr

              form(method='POST')
                .field
                  .control
                    input.input(type='text', name='name', value=log.name, maxlength=32, placeholder=(log.name || log.id))
                .field
                  .control
                    button.button
                      span.icon
                        i.far.fa-save
                      span Rename Log