extends layout.pug

mixin wishlistDetails(wishlist, onlyShowAddedByUser)
  .wishlist-dropdown-container.wishlist-dropdown-container-unloaded
    button.wishlist-dropdown-button.button.is-rounded
      span.icon.is-small
        i.fas.fa-chevron-left
        i.fas.fa-chevron-down
    ul.wishlist-dropdown
      for item in wishlist
        if onlyShowAddedByUser === undefined || item.addedBy === onlyShowAddedByUser
          li= item.name

block content
  style.
    .wishlist-dropdown-container-unloaded {
      display: none;
    }
    .wishlist-dropdown-button {
      margin-left: auto;
      margin-right: 0;
      display: block;
    }
    .wishlist-dropdown {
      display: none;
    }
    .wishlist-dropdown li {
      list-style-type: disc !important;
    }
    .wishlist-dropdown-container-active > .wishlist-dropdown {
      display: block;
    }
    
    .wishlist-dropdown-container .fa-chevron-left {
      display: inline-block;
    }
    .wishlist-dropdown-container .fa-chevron-down {
      display: none;
    }
    .wishlist-dropdown-container.wishlist-dropdown-container-active .fa-chevron-left {
      display: none;
    }
    .wishlist-dropdown-container.wishlist-dropdown-container-active .fa-chevron-down {
      display: inline-block;
    }

  ul.noStyle.noLeftMargin
    if req.user._id !== '_CCUNKNOWN'
      li
        .box
          a(href=`${_CC.config.base}wishlist/${req.user._id}`, style='color: #4a4a4a;')
            .columns.is-mobile
              if config.pfp
                .column.is-1(style='overflow: hidden; padding: 0 0.5rem 0 0;')
                  figure.image.is-square.is-fullwidth.is-marginless(style='display: inline-block;')
                    img.is-rounded.is-fullwidth(src=req.user.pfp, style='object-fit: cover;')
              .column
                span
                  span=lang('WISHLISTS_COUNTS_SELF', req.user._id)
                  progress.progress(value=1, max=1)
          +wishlistDetails(req.user.wishlist, req.user._id)
    each user in users
      if req.user._id !== user.id
        li
          .box
            a(href=`${_CC.config.base}wishlist/${user.id}`, style='color: #4a4a4a;')
              .columns.is-mobile
                if config.pfp
                  .column.is-1(style='overflow: hidden; padding: 0 0.5rem 0 0;')
                    figure.image.is-square.is-fullwidth.is-marginless(style='display: inline-block;')
                      img.is-rounded.is-fullwidth(src=user.doc.pfp, style='object-fit: cover;')
                .column
                  span= lang('WISHLISTS_COUNTS', user.id, totals(user.doc.wishlist).pledged, user.doc.wishlist.length)
                  progress.progress.is-info(value=totals(user.doc.wishlist).pledged, max=user.doc.wishlist.length)
            +wishlistDetails(user.doc.wishlist)
  script.
    document.querySelectorAll('.wishlist-dropdown-button')
      .forEach(button => {
        button.addEventListener('click', e => {
          button.parentElement.classList.toggle('wishlist-dropdown-container-active')
        })
      })
    document.querySelectorAll('.wishlist-dropdown-container-unloaded')
      .forEach(container => container.classList.remove('wishlist-dropdown-container-unloaded'))