solid-widget(name='hubl-circle-owner') template solid-display.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' ) .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='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.circles || endpoints.get.circles}` target-src='${src}') hubl-reactivity(data-src=`${endpoints.circles || endpoints.get.circles}joinable/` target-src='${src}') hubl-reactivity(bind-user nested-field="circles" target-src='${src}') if (endpoints.post && endpoints.post.circles) && (endpoints.get && endpoints.get.circles) hubl-reactivity(data-src=`${endpoints.post.circles}joinable/` target-src=`${src}`) hubl-reactivity(data-src=`${endpoints.post.circles}` target-src=`${src}`) solid-display( class='table-body' bind-user nested-field='circles' fields='cell1(circle.name, 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' class-circle.name='segment block margin-bottom-xxsmall text-xlarge text-color-heading text-semibold text-letter-spacing-large text-underline ellipsis' class-circle.subtitle='segment full text-ellipsis' action-leaveButton="joinButton" widget-leaveButton="hubl-admin-circle-leave-button" widget-circle.owner='hubl-circle-owner' 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='Join' data-trans='submit-button=circle.list.buttonJoin' ) hubl-reactivity(data-src=`${endpoints.circles || endpoints.get.circles}` target-src='${value}') hubl-reactivity(data-src=`${endpoints.circles || endpoints.get.circles}joinable/` target-src='${value}') hubl-reactivity(bind-user nested-field="circles" target-src='${value}') if (endpoints.post && endpoints.post.circles) && (endpoints.get && endpoints.get.circles) hubl-reactivity(data-src=`${endpoints.post.circles}joinable/` target-src=`${value}`) hubl-reactivity(data-src=`${endpoints.post.circles}` target-src=`${value}`) solid-display( class='table-body' data-src=`${endpoints.circles || endpoints.get.circles}joinable/` fields='cell1(name, 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 ellipsis' class-subtitle='segment full text-ellipsis' widget-owner='hubl-circle-owner' widget-members="hubl-admin-circle-join-button" order-by="name" )