.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-widget(name='admin-circle-join-button')
          template
            button.button.text-bold.text-uppercase.reversed.button-blue.bordered.with-icon.icon-arrow-right-circle.test
              sib-form(
                data-src=''
                nested-field='members'

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

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

                submit-button='Join Circle'
              )

        sib-widget(name="admin-circle-buttons")
          template
            sib-display(
              data-src='${src}'
              nested-field='members'
              fields='relation'
              action-relation='relation'
              widget-relation='admin-circle-leave-button'
              search-fields='user'
              search-widget-user='sib-form-hidden'
              search-value-user="-"
              empty-widget='admin-circle-join-button'
              hd-inherit-bind-resources='admin-circle-join-button'
              hd-inherit-user-id="search-value-user"
              hd-inherit-widgets
            )

        sib-display(
          class='table-body'

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

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

          widget-buttons="admin-circle-buttons"
          action-buttons="buttons"
          hd-inherit-widgets
          hd-inherit-widgets-multiple

          widget-owner='circle-owner'
        )


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