hubl/src/views/admin/page-admin-circles.pug

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

  include ../circle/page-circle-left.pug

  #admin-circle-list.content-box__height(hidden, data-view="admin-circle-list")
    include ../../templates/hubl-user-avatar.pug

    solid-widget(name='hubl-circle-owner')
      template
        solid-display.segment.margin-left-xlarge.user-thumb(
          data-src='${await value}'
          fields='account.picture, content(name-and-icon(name), sub(username))'

          class-account.picture='user-thumb-avatar'
          class-content='user-thumb-content'
          class-name-and-icon='user-thumb-content__name-and-icon'
          class-name='name'
          class-sub='user-thumb-content__sub-text'
          class-username=''

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

    div.segment.padding-top-xsmall.padding-right-large.padding-bottom-xsmall.padding-left-large.border-bottom.border-color-grey.text-color-heading
      div
        h2.text-uppercase.text-xlarge.text-letter-spacing-large(data-trans='circle.list.title')
      div.segment.lg-hidden
        button.mobile-sidebar-button.jsMobileSidebarOpenButton.icon-arrow-left-circle(data-trans='circle.list.buttonMobile')

    div.segment.padding-large
      div.segment.margin-bottom-medium.clearfix
        div.segment.lg-half.float-left
          h3.text-color-heading.text-semibold.text-letter-spacing-large(data-trans='circle.list.subTitle')
        div.segment.lg-half.float-left.text-right.padding-top-xxsmall
          solid-ac-checker(data-src=`${endpoints.circles || (endpoints.post && endpoints.post.circles)}`, permission='acl:Append')
            solid-link(
              class='button text-xsmall text-bold text-uppercase reversed color-secondary bordered icon icon-plus'
              next='admin-circle-create' data-trans='circle.list.buttonCreate'
            )

      .table-wrapper
        .table

          div.table-header.bg-color-third.text-color-heading
            div.table-cell.w280(data-trans='circle.list.tableHeader1')
            div.table-cell.w280(data-trans='circle.list.tableHeader2')
            div.table-cell.w280(data-trans='circle.list.tableHeader3')

          solid-widget(name='hubl-admin-circle-leave-button')
            template
              solid-delete(
                class='button text-xsmall text-bold text-uppercase color-secondary bordered'
                data-src="${src}"
                data-label=''
                data-trans='data-label=circle.list.buttonQuit'
              )
              hubl-reactivity(data-src=`${endpoints.circles || endpoints.get.circles}` target-src='${src}')
              hubl-reactivity(data-src=`${endpoints.circles || endpoints.get.circles}joinable/` target-src='${src}')
              hubl-reactivity(bind-user nested-field="circles" target-src='${src}')
              if (endpoints.post && endpoints.post.circles) && (endpoints.get && endpoints.get.circles)
                hubl-reactivity(data-src=`${endpoints.post.circles}joinable/` target-src=`${src}`)
                hubl-reactivity(data-src=`${endpoints.post.circles}` target-src=`${src}`)

          solid-display(
            class='table-body'

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

            class-circle.name='table-cell w280 text-xlarge text-color-heading text-semibold text-letter-spacing-large text-underline'
            class-circle.owner='table-cell w280'
            class-leaveButton='table-cell w280'

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

            order-by="circle.name"
          )

          solid-widget(name='hubl-admin-circle-join-button')
            template
              solid-form(
                class='button text-xsmall text-bold text-uppercase reversed color-secondary bordered icon icon-arrow-right-circle'
                data-src='${value}'

                fields='user.username'
                value-user.username='hubl-workaround-493'
                widget-user.username='solid-form-hidden'

                submit-button='Rejoindre'
                data-trans='submit-button=circle.list.buttonJoin'
              )
              hubl-reactivity(data-src=`${endpoints.circles || endpoints.get.circles}` target-src='${value}')
              hubl-reactivity(data-src=`${endpoints.circles || endpoints.get.circles}joinable/` target-src='${value}')
              hubl-reactivity(bind-user nested-field="circles" target-src='${value}')
              if (endpoints.post && endpoints.post.circles) && (endpoints.get && endpoints.get.circles)
                hubl-reactivity(data-src=`${endpoints.post.circles}joinable/` target-src=`${value}`)
                hubl-reactivity(data-src=`${endpoints.post.circles}` target-src=`${value}`)

          solid-display(
            class='table-body'

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

            class-name='table-cell w280 text-xlarge text-color-heading text-semibold text-letter-spacing-large text-underline'
            class-owner='table-cell w280'
            widget-owner='hubl-circle-owner'

            class-members='table-cell w280'
            widget-members="hubl-admin-circle-join-button"

            order-by="name"
          )

      div#loader-admin-circles.loader.loader-top
        div
        div
        div
        div

  #admin-circle-create.content-box__height(hidden, data-view="admin-circle-create")
    include page-admin-circles-create.pug