.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-description
    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"
        )

    include templates/hd-user-avatar.pug

    sib-widget(name='circle-owner')
      template
        sib-display(
          data-src='${await value}'
          fields='account.picture, sup(name), sub(username)'

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


    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.cols-3.table-no-border-bottom
        div.table-header Name
        div.table-header Admins
        div.table-header 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, button)'

          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'
        )

      sib-display(
        class='table cols-3'

        data-src=`${endpoints.circles}`
        fields='name, owner, buttons(members, button)'

        class-name='cell'
        class-owner='cell'
        
        multiple-groups=""
        widget-members="circle-admin-leave-button-template"
        multiple-members=""

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

        widget-owner='circle-owner'
      )


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