solid-widget(name=`orbit-admin-circle-join-button`)
  template
    solid-form(
      class='join-button sm-full text-xsmall'
      data-src='${value}'

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

      submit-button=''
      submit-widget="button"
      class-submit-button="add-member-button segment sm-full margin-top-xsmall text-xsmall children-link-button children-link-text-bold children-link-text-uppercase children-link-reversed color-secondary bordered children-button-icon children-icon-arrow-right-circle children-icon-small children-icon-margin-right-xsmall"
      data-trans='submit-button=circle.list.buttonJoin'
    )
    orbit-reactivity(data-src=`${getComponent('circles').endpoints.get}` target-src='${value}')
    orbit-reactivity(data-src=`${getComponent('circles').endpoints.get}joinable/` target-src='${value}')
    orbit-reactivity(data-src=`${getComponent('circles').endpoints.post}` target-src='${value}')
    orbit-reactivity(data-src=`${getComponent('circles').endpoints.post}joinable/` target-src='${value}')
    orbit-reactivity(bind-user nested-field="circles" target-src='${value}')

include page-admin-circles.pug

div.segment.full.padding-small.padding-top-xsmall.sm-padding-xsmall.whitespace-normal
  solid-display(
    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'
    data-src=`${getComponent('circles').endpoints.get}joinable/`
    fields='segment1(segment2(community.community.logo), segment3(name, subtitle, counter, members))'
    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-name='segment block text-xlarge text-bold text-color-heading margin-bottom-xsmall whitespace-normal'
    class-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-community.community.logo='orbit-admin-community-logo'
    action-name=`${getRoute(`circles`, true)}-information`
    widget-name='orbit-admin-circle-name'
    action-counter="counter"
    widget-counter='orbit-admin-circle-counter-alternate'
    widget-members=`orbit-admin-circle-join-button`
  )