solid-widget(name='hubl-circle-owner')
  template
    solid-display.labelled-avatar.two-lines(
      data-src='${await value}'
      fields='segment1(account.picture), segment2(line1(name), line2(at, username))'

      class-segment1='segment'
      class-account.picture='avatar'

      class-segment2='segment three-quarter margin-left-xsmall'
      class-line1='segment block'
      class-name='text-small text-semibold text-color-heading text-sub'
      class-line2='segment block text-xsmall'

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

      value-at='@'
    )

div.segment.full.padding-large.sm-padding-top-small.sm-padding-right-xsmall.sm-padding-bottom-small.sm-padding-left-xsmall.border-bottom.border-color-grey.whitespace-normal
  h2.margin-none.text-color-heading.text-uppercase.text-xlarge.text-letter-spacing-large(data-trans='circle.list.title')

div.segment.full.padding-large.sm-padding-xsmall.sm-padding-top-normal.whitespace-normal

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

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

  .segment.table-wrapper
    .table

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

      solid-widget(name='hubl-admin-circle-leave-button')
        template
          solid-delete(
            class='segment text-xsmall children-link-button children-link-text-bold children-link-text-uppercase children-link-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='cell1(circle.name, circle.subtitle), cell2(circle.owner), cell3(leaveButton)'
        loader-id='loader-admin-circles'

        class-cell1='segment table-cell third whitespace-normal'
        class-cell2='segment table-cell third text-center text-left'
        class-cell3='segment table-cell third text-center'

        class-circle.name='segment block margin-bottom-xxsmall text-xlarge text-color-heading text-semibold text-letter-spacing-large text-underline ellipsis'
        class-circle.subtitle='segment full text-ellipsis'

        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='join-button text-xsmall'
            data-src='${value}'

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

            submit-button='Join'
            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='cell1(name, subtitle), cell2(owner), cell3(members)'
        loader-id='loader-admin-circles'

        class-cell1='segment table-cell third whitespace-normal'
        class-cell2='segment table-cell third text-center text-left'
        class-cell3='segment table-cell third text-center'

        class-name='segment block margin-bottom-xxsmall text-xlarge text-color-heading text-semibold text-letter-spacing-large text-underline ellipsis'
        class-subtitle='segment full text-ellipsis'

        widget-owner='hubl-circle-owner'
        widget-members="hubl-admin-circle-join-button"

        order-by="name"
      )