solid-widget(name='hubl-circle-owner')
  template
    solid-display.segment.block.margin-top-xxsmall.margin-bottom-xxsmall.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'
        )

  solid-widget(name='hubl-admin-circle-counter')
    template
      div(style='float:right')
        solid-display(
          fields=''
          data-src="${src}"
          nested-field="members"
          counter-template="\\\${counter}"
        )
        span.icon.icon-people.icon-xsmall.margin-right-xxsmall

  solid-widget(name='hubl-admin-circle-counter-alternate')
    template
      div(style='float:right')
        solid-display(
          fields=''
          data-src="${src}"
          nested-field="circle.members"
          counter-template="\\\${counter}"
        )
        span.icon.icon-people.icon-xsmall.margin-right-xxsmall

  solid-widget(name='admin-circle-link')
    template
      solid-link(
        data-src='${src}'
        next='circle-information'
      )
        solid-display(
          data-src='${src}'
          fields='name'
        )

  solid-widget(name='admin-circle-link-alternate')
    template
      solid-display(
        data-src='${src}'
        nested-field='circle'
        fields='name'
        class-name='segment block margin-bottom-xxsmall text-xlarge text-color-heading text-semibold text-letter-spacing-large text-underline text-ellipsis admin-name-ellipsis'
        action-name='name'
        widget-name='admin-circle-link'
      )

  solid-form-search.form(
    id="admin-circle-filter"
    fields='name'
    label-name=''
    data-trans='label-name=circle.list.searchBy'
    widget-name='solid-form-label-text'
    class-name="segment margin-bottom-medium half sm-full padding-right-small sm-padding-none text-small text-semibold text-uppercase text-color-heading"
  )

  .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="leave-circle-reactivity")
        template
          hubl-reactivity(data-src=`${endpoints.get.circles}` target-src='${value}')
          hubl-reactivity(data-src=`${endpoints.get.circles}joinable/` target-src='${value}')
          hubl-reactivity(data-src=`${endpoints.post.circles}` target-src='${value}')
          hubl-reactivity(data-src=`${endpoints.post.circles}joinable/` target-src='${value}')
          hubl-reactivity(bind-user nested-field="circles" target-src='${value}')


      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.get.circles}` target-src='${src}')
          hubl-reactivity(data-src=`${endpoints.get.circles}joinable/` target-src='${src}')
          hubl-reactivity(data-src=`${endpoints.post.circles}` target-src='${src}')
          hubl-reactivity(data-src=`${endpoints.post.circles}joinable/` target-src='${src}')
          hubl-reactivity(bind-user nested-field="circles" target-src='${src}')
          solid-display(
            data-src="${src}"
            fields="circle"
            widget-circle='leave-circle-reactivity'
            hidden
          )

      solid-display(
        class='table-body'
        filtered-by="admin-circle-filter"
        bind-user
        nested-field='circles'
        fields='cell1(name(circle.name), counter, 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'

        action-circle.name='circle.name'
        widget-circle.name='admin-circle-link-alternate'
        class-circle.subtitle='segment full text-ellipsis'

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

        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=''
            data-trans='submit-button=circle.list.buttonJoin'
          )
          hubl-reactivity(data-src=`${endpoints.get.circles}` target-src='${value}')
          hubl-reactivity(data-src=`${endpoints.get.circles}joinable/` target-src='${value}')
          hubl-reactivity(data-src=`${endpoints.post.circles}` target-src='${value}')
          hubl-reactivity(data-src=`${endpoints.post.circles}joinable/` target-src='${value}')
          hubl-reactivity(bind-user nested-field="circles" target-src='${value}')

      solid-display(
        class='table-body'
        filtered-by="admin-circle-filter"

        data-src=`${endpoints.circles || endpoints.get.circles}joinable/`
        fields='cell1(name, counter, 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 text-ellipsis admin-name-ellipsis'
        action-name='name'
        widget-name='admin-circle-link'
        class-subtitle='segment full text-ellipsis'

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

        order-by="name"
      )