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=`${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"
    fields='name'
    label-name=''
    widget-name='solid-form-label-text'
    class-name="segment 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"
    data-trans='label-name=circle.list.searchBy;submit-button=goButton'
  )

  .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=`${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 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
          )

      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='hubl-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=''
            submit-widget="button"
            data-trans='submit-button=circle.list.buttonJoin'
          )
          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-display(
        class='table-body'
        filtered-by="admin-circle-filter"

        data-src=`${getComponent('circles').endpoints.get}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='hubl-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"
      )