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
  div.segment.full.sm-three-quarter
    h2.margin-none.text-color-heading.text-uppercase.text-xlarge.text-letter-spacing-large(data-trans='circle.list.title')
  div.segment.lg-hidden.sm-quarter.text-right
    div.jsMobileRightMenuButton.icon.icon-options-vertical.icon-heading

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

  div(id=`loader-admin-circles-${page}`).loader.loader-top
    div
    div
    div
    div

  div.segment.full.margin-bottom-medium.sm-padding-none.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=`${getComponent('circles').endpoints.post}`, 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-${getRoute('circles', true)}-create`
          data-trans='circle.list.buttonCreate'
        )

  solid-form-search.form.search-form(
    id=`admin-circle-filter-${page}`
    fields='searchname'
    search-searchname='name, circle.name'
    label-searchname=''
    widget-searchname='solid-form-label-text'
    class-searchname="segment margin-bottom-medium margin-bottom-medium third sm-full padding-right-small sm-padding-none text-small text-semibold text-uppercase text-color-heading"
    submit-button=""
    submit-widget="button"
    class-submit-button="search-button segment sm-full text-xsmall children-link-button children-link-text-bold children-link-text-uppercase children-link-color-secondary bordered children-icon-arrow-right-circle children-icon-small children-icon-margin-right-xsmall"
    data-trans='label-searchname=circle.list.searchBy;submit-button=circle.list.searchButton'
  )

  ul(class='segment full margin-top-xsmall sm-margin-top-none sm-padding-none whitespace-normal tabs text-disable-selection')
    li(class='segment sm-full text-xlarge text-color-heading text-letter-spacing-large margin-right-medium sm-margin-right-none sm-margin-bottom-xsmall')
      solid-link(class='segment sm-full sm-padding-xsmall tab' next=`admin-${getRoute('circles', true)}`)&attributes({'class': page == 'join' ? 'active' : false})
        span(class='segment lg-hidden icon icon-globe icon-margin-right-xsmall')
        span(data-trans='circle.list.tabJoin')
        solid-display(
          class="margin-left-xxsmall"
          data-src=`${getComponent('circles').endpoints.get}joinable/`
          fields=""
          counter-template="(${counter})"
          filtered-by=`admin-circle-filter-${page}`
        )
    li(class='segment sm-full text-xlarge text-color-heading text-letter-spacing-large margin-left-medium sm-margin-left-none')
      solid-link(class='segment sm-full sm-padding-xsmall tab' next=`admin-${getRoute('circles', true)}-leave`)&attributes({'class': page == 'leave' ? 'active' : false})
        span(class='segment lg-hidden icon icon-check icon-margin-right-xsmall')
        span(data-trans='circle.list.tabLeave')
        solid-display(
          class="margin-left-xxsmall"
          bind-user
          nested-field="circles"
          fields=""
          counter-template="(${counter})"
          filtered-by=`admin-circle-filter-${page}`
        )