extends layout.pug

block title
  h1
    .level
      .level-left
        .level-item
          button.button.is-rounded(onclick='location.reload()')
            span.icon
              i.fas.fa-sync-alt
        .level-item
          span  #{config.siteTitle} - #{title} 

block content
  script(type='data/user_id')= req.user._id
  if process.env.TABLE !== 'false'
    .box
      table.table.has-mobile-cards
        thead
          th(style='width: 25%;') Name
          th(style='width: 50%;') Note
          th Edit Item
          th Added By
          if req.params.user === req.user._id
            th Move Up
            th Move Down
          else
            th Pledge
          th Delete
        tbody
          each item, index in wishlist
            if req.user._id === item.addedBy || req.params.user !== req.user._id
              tr(id=item.id)
                if item.url
                  td.ugc(data-label='Name')
                    a(
                      href=item.url,
                      rel='noopener noreferrer',
                      target='_blank'
                    )= (item.name ? item.name : item.url)
                else
                  td.ugc(data-label='Name')= item.name
                td.ugc(data-label='Note')= item.note
                td(data-label='Edit Item')
                  form.inline(method='GET', action=`/wishlist/${req.params.user}/note/${item.id}`)
                    .field.inline
                      .control.inline
                        button.button.is-text(
                          type='submit',
                          style='text-decoration: none;'
                          disabled=item.addedBy !== req.user._id
                        )
                          span.icon
                            i.far.fa-edit
                td.ugc(data-label='Added By')= item.addedBy
                if req.params.user === req.user._id
                  td(data-label='Move Item Up')
                    form.upForm.inline(method='POST', action=`/wishlist/${req.params.user}/move/up/${item.id}`)
                      .field.inline
                        .control.inline
                          button.button.is-text(
                            type='submit',
                            style='text-decoration: none;',
                            disabled=index === firstCanSee
                          )
                            span.icon
                              i.fas.fa-arrow-up
                  td(data-label='Move Item Down')
                    form.downForm.inline(method='POST', action=`/wishlist/${req.params.user}/move/down/${item.id}`)
                      .field.inline
                        .control.inline
                          button.button.is-text(
                            type='submit',
                            style='text-decoration: none;',
                            disabled=index === lastCanSee
                          )
                            span.icon
                              i.fas.fa-arrow-down
                else
                  td(data-label='Pledge')
                    if req.params.user !== req.user._id && !item.pledgedBy
                      form.inline(method='POST', action=`/wishlist/${req.params.user}/pledge/${item.id}`)
                        .field.inline
                          .control.inline
                            input.inline.button.is-primary(type='submit' value='Pledge')
                    if item.pledgedBy === req.user._id
                      form.inline(method='POST', action=`/wishlist/${req.params.user}/unpledge/${item.id}`)
                        .field.inline
                          .control.inline
                            input.inline.button(type='submit' value='Unpledge')
                    if item.pledgedBy && item.pledgedBy !== req.user._id
                      span.ugc Pledged for by #{item.pledgedBy}
                td(data-label='Delete Item')
                  form.inline(
                    method='POST',
                    action=`/wishlist/${req.params.user}/${req.user._id === req.params.user ? 'remove' : 'unpledge'}/${item.id}`
                  )
                    .field.inline
                      .control.inline
                        button.button.is-text(
                          type='submit',
                          style='text-decoration: none;',
                          disabled=item.addedBy !== req.user._id
                        )
                          span.icon
                            i.fas.fa-trash

  else
    each item, index in wishlist
      if req.user._id === item.addedBy || req.params.user !== req.user._id
        .box
          span.overflowWrap
            if item.url
              a(
                href=item.url,
                rel='noopener noreferrer',
                target='_blank'
              )= (item.name ? item.name : item.url)
            else
              span= item.name
          hr
          if item.note 
            textarea.textarea.has-fixed-size(
              rows=String(config.wishlist.note.rows),
              readonly
            )= item.note
          span.overflowWrap Added by: #{item.addedBy}
          hr
          div
            if req.params.user !== req.user._id && !item.pledgedBy
              form.inline(method='POST', action=`/wishlist/${req.params.user}/pledge/${item.id}`)
                .field.inline
                  .control.inline
                    input.inline.button.is-primary(type='submit' value='Pledge')
            if item.pledgedBy === req.user._id
              form.inline(method='POST', action=`/wishlist/${req.params.user}/unpledge/${item.id}`)
                .field.inline
                  .control.inline
                    input.inline.button(type='submit' value='Unpledge')
            if req.user._id === req.params.user
              form.inline(method='POST', action=`/wishlist/${req.params.user}/remove/${item.id}`)
                .field.inline
                  .control.inline
                    input.inline.button.is-warning(type='submit' value='Remove')
            if req.user._id === req.params.user || req.user._id === item.addedBy
              form.inline(method='GET', action=`/wishlist/${req.params.user}/note/${item.id}`)
                .field.inline
                  .control.inline
                    input.inline.button(type='submit', value='Edit item')
              if index !== firstCanSee && req.user._id === req.params.user
                form.inline(method='POST', action=`/wishlist/${req.params.user}/move/up/${item.id}`)
                  .field.inline
                    .control.inline
                      input.inline.button(type='submit' value='Move item up')
              if index !== lastCanSee && req.user._id === req.params.user
                form.inline(method='POST', action=`/wishlist/${req.params.user}/move/down/${item.id}`)
                  .field.inline
                    .control.inline
                      input.inline.button(type='submit' value='Move item down')
  form(method='POST')
    .field
      label.label Item URL or Name
      .control.has-icons-left
        input.input(
          type='text',
          name='itemUrlOrName',
          placeholder='https://www.amazon.com/dp/B00ZV9RDKK'
        )
        span.icon.is-small.is-left
          i.fas.fa-gift
    .field
      label.label Note
      .control
        textarea.textarea(
          name='note',
          placeholder='Optional'
        )
    .field
      .control
        input.button(type='submit' value=(req.user._id === req.params.user ? 'Add item to wishlist' : 'Pledge item'))
  script(src='/js/wishlist.js')