hubl/src/page-admin-circles.pug

.content-box.full-width.with-form
  sib-router(default-route='admin-circle-list')
    sib-route(name='admin-circle-list')
    sib-route(name='admin-circle-create')

  div.content-box__header.with-edit
    div
      p.name Administration


  #admin-circle-list(hidden)
    sib-widget(name="circle-admin-leave-button-template")
      template
        sib-ac-checker(
          permission="acl:Delete"
          data-src="${value['@id']}"
        )
          sib-delete(
            class='button text-bold text-uppercase reversed button-dark bordered with-icon icon-close'
            data-src="${value['@id']}"
            data-label='Leave'
          )

    sib-widget(name="circle-admin-join-button-template")
      template
        //- BUG: Populate event trigger before the view is fully loaded! - https://git.happy-dev.fr/startinblox/framework/sib-core/issues/521
        sib-form.circle-admin-join-button(
          data-src="${src}" 
          nested-field='members'
          fields='user'
          widget-user='sib-form-dropdown'
          label-user=''
          range-user=`${endpoints.users}`
          submit-button='Join'
          set-user-id-select="user"
        )

    sib-widget(name='team-template-edit')
      template
        sib-display(
          data-src='${await value.user}'
          fields='account.picture, sup(name, groups), sub(profile.city)'

          widget-account.picture='hd-user-avatar'

          multiple-groups=''
          widget-groups='hd-user-groups'
        )


    div.content-box__info
      
      div.admin-header

        div.admin-header__title Circles

        sib-link(
          class='button text-bold text-uppercase reversed button-yellow bordered with-icon icon-plus'
          next='admin-circle-create'
        ) Create a new circle

      div.table-header
        div.cell Name
        div.cell Admins
        div.cell Join

      //-fields="name, own(owner.account.picture, owner.name), buttons(members, button)"
      sib-display.table-body.test(
        data-src=`${endpoints.circles}`
        fields='name, own(owner.account.picture, sup(owner.name), sub(owner.username)), buttons(members)'

        multiple-groups=""
        widget-members="circle-admin-leave-button-template"
        multiple-members=""

        widget-button="circle-admin-join-button-template"
        action-button="button"

        widget-owner.account.picture='hd-user-avatar'
      )


  #admin-circle-create(hidden)
    include page-admin-circles-create.pug