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

  div.content-box__header.with-description
    h1.title-left.without-margin Administration


  #circle-left(hidden)
    include ../circle/page-circle-left.pug


  #admin-circle-list(hidden)
    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

      .table

        div.table-header.grey-color
          div Name
          div Admins
          div Join

        sib-widget(name='admin-circle-leave-button')
          template
            sib-delete(
              class='button text-bold text-uppercase reversed button-dark bordered with-icon icon-close'
              data-src="${src}"
              data-label='Leave circle'
            )

        sib-display(
          class='table-body'

          bind-user
          nested-field='circles'
          fields='circle.name, circle.owner, leaveButton'

          class-circle.name='w33 cell border cell-with-name'
          class-circle.owner='w33 cell border cell-with-id-card'
          class-leaveButton='w33 cell border cell-with-buttons'

          action-leaveButton="joinButton"
          widget-leaveButton="admin-circle-leave-button"
          widget-circle.owner='circle-owner'
        )

        sib-widget(name='admin-circle-join-button')
          template
            sib-form.button.text-bold.text-uppercase.reversed.button-blue.bordered.with-icon.icon-arrow-right-circle.flex(
              data-src='${value}'

              fields='user.@id'
              label-user.@id=''
              value-user.@id='self'
              widget-user.@id='sib-form-hidden'

              hd-inherit-bind-user2input="input[name='user.@id']"

              submit-button='Join Circle'
            )

        sib-display(
          class='table-body'

          data-src=`${endpoints.circles || endpoints.get.circles}joinable/`
          fields='name, owner, members'

          class-name='w33 cell border cell-with-name'
          class-owner='w33 cell border cell-with-id-card'
          widget-owner='circle-owner'

          class-members='w33 cell border cell-with-buttons'
          widget-members="admin-circle-join-button"
        )


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