solid-router(default-route='admin-circle-list', hidden)
  solid-route(name='admin-circle-list')
  solid-route(name='admin-circle-create')
  solid-route(name='circle-left')

#circle-left(hidden, data-view="circle-left")
  include ../circle/page-circle-left.pug

#admin-circle-list(hidden, data-view="admin-circle-list")

  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 lg-three-quarter margin-left-xsmall'
        class-line1='block'
        class-name='text-small text-semibold text-color-heading text-sub'
        class-line2='block text-xsmall'

        widget-account.picture='hubl-user-avatar'

        value-at='@'
      )

  div.segment.lg-full.sm-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-uppercase.text-xlarge.text-letter-spacing-large(data-trans='circle.list.title')

  div.segment.lg-full.sm-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.lg-full.sm-full.margin-bottom-xlarge.whitespace-normal
      div.segment.lg-half.sm-full
        h3.text-color-heading.text-semibold.text-letter-spacing-large(data-trans='circle.list.subTitle')
      div.segment.lg-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-circle-create'
            data-trans='circle.list.buttonCreate'
          )

    .segment.table-wrapper
      .table

        div.table-header.bg-color-third.text-color-heading
          div.segment.table-cell.lg-third(data-trans='circle.list.tableHeader1')
          div.segment.table-cell.lg-third(data-trans='circle.list.tableHeader2')
          div.segment.table-cell.lg-third(data-trans='circle.list.tableHeader3')

        solid-widget(name='hubl-admin-circle-leave-button')
          template
            solid-delete(
              class='button text-xsmall text-bold text-uppercase 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.description), cell2(circle.owner), cell3(leaveButton)'
          loader-id='loader-admin-circles'

          class-cell1='segment table-cell lg-third text-left text-top'
          class-cell2='segment table-cell lg-third text-center text-left'
          class-cell3='segment table-cell lg-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'

          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='button text-xsmall text-bold text-uppercase reversed color-secondary bordered icon icon-arrow-right-circle'
              data-src='${value}'

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

              submit-button='Rejoindre'
              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, description), cell2(owner), cell3(members)'
          loader-id='loader-admin-circles'

          class-cell1='segment table-cell lg-third text-left text-top'
          class-cell2='segment table-cell lg-third text-center text-left'
          class-cell3='segment table-cell lg-third text-center'

          class-name='segment block margin-bottom-xxsmall text-xlarge text-color-heading text-semibold text-letter-spacing-large text-underline ellipsis'

          widget-owner='hubl-circle-owner'
          widget-members="hubl-admin-circle-join-button"

          order-by="name"
        )

#admin-circle-create(hidden, data-view="admin-circle-create")
  include page-admin-circles-create.pug