solid-widget(name=`leave-circle-reactivity`)
  template
    hubl-reactivity(data-src=`${getComponent('circles').endpoints.get}` target-src='${value}')
    hubl-reactivity(data-src=`${getComponent('circles').endpoints.get}joinable/` target-src='${value}')
    hubl-reactivity(data-src=`${getComponent('circles').endpoints.post}` target-src='${value}')
    hubl-reactivity(data-src=`${getComponent('circles').endpoints.post}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 sm-full 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=`${getComponent('circles').endpoints.get}` target-src='${src}')
    hubl-reactivity(data-src=`${getComponent('circles').endpoints.get}joinable/` target-src='${src}')
    hubl-reactivity(data-src=`${getComponent('circles').endpoints.post}` target-src='${src}')
    hubl-reactivity(data-src=`${getComponent('circles').endpoints.post}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
    )

include page-admin-circles.pug

div.segment.full.padding-small.padding-top-xsmall.sm-padding-xsmall.whitespace-normal
  solid-display(
    bind-user
    nested-field='circles'
    class='segment full children children-quarter sm-children-full children-margin-bottom-medium sm-children-margin-bottom-xsmall children-padding-right-xsmall children-padding-left-xsmall sm-children-padding-none sm-whitespace-normal masonry pagination'
    fields='segment1(segment2(circle.community.community.logo), segment3(circle.name, circle.subtitle, counter, leaveButton))'
    filtered-by=`admin-circle-filter-${page}`
    order-by='name'
    paginate-by='20'
    loader-id=`loader-admin-circles-${page}`

    class-segment1='segment hover bg-color-white shadow border-rounded-xxsmall full text-top whitespace-normal'
    class-segment2='segment block padding-xlarge text-center'
    class-segment3='segment full padding-xlarge padding-top-medium sm-padding-medium border-top border-color-grey text-center whitespace-normal'
    class-circle.name='segment block text-xlarge text-bold text-color-heading margin-bottom-xsmall whitespace-normal'
    class-circle.subtitle='segment two-lines-ellipsis margin-bottom-xlarge sm-margin-bottom-medium whitespace-normal circle-subtitle-custom'
    class-counter='segment block margin-bottom-large whitespace-normal'

    widget-circle.community.community.logo='hubl-admin-community-logo'
    action-circle.name=`${getRoute(`circles`, true)}-information`
    widget-circle.name='hubl-admin-circle-fix-url-name'
    action-counter="counter"
    widget-counter='hubl-admin-circle-counter-alternate-fix'
    action-leaveButton="joinButton"
    widget-leaveButton=`hubl-admin-circle-leave-button`
  )