solid-ac-checker(permission='acl:Read', bind-resources)
  div.segment.full.padding-large.border-bottom.border-color-grey
    div.segment.half.sm-three-quarter.whitespace-normal
      solid-display.text-xlarge.text-letter-spacing-large(
        bind-resources
        fields='name, dash, subtitle'

        value-dash=' - '

        class-name='text-color-heading text-bold'
        class-dash='text-color-heading text-bold'          
      )
    div.segment.half.sm-hidden.text-right
      solid-link(class="backlink", bind-resources, next=`${component.route}-profile` data-trans='circle.edit.backlink')
    div.segment.lg-hidden.sm-quarter.text-right
        div.jsMobileRightMenuButton.icon.icon-options-vertical.icon-heading

div.segment.full.padding-large.whitespace-normal

  solid-ac-checker(permission='acl:Write', bind-resources)
    div.loader.loader-top(id=`loader-${component.route}-edit`)
      div
      div
      div
      div
    
    solid-form.form(
      bind-resources

      fields='name, subtitle, description, status, community.community, owner'
      required-status
      required-name
      required-owner
      required-subtitle
      required-community.community
      range-owner=`${component.endpoints.owners}`

      label-name=''
      label-owner=''
      label-description=''
      label-subtitle=''
      label-status=''
      label-community.community=''
      label-help=''

      class-name='segment margin-bottom-medium half sm-full padding-right-small sm-padding-none text-small text-semibold text-uppercase text-color-heading'
      class-subtitle='segment margin-bottom-medium half sm-full padding-left-small sm-padding-none text-small text-semibold text-uppercase text-color-heading'
      class-description='segment margin-bottom-medium full text-small text-semibold text-uppercase text-color-heading'
      class-status='segment margin-bottom-medium half sm-full padding-right-small sm-padding-none text-small text-semibold text-uppercase text-color-heading whitespace-normal'
      class-community.community='segment margin-bottom-medium half sm-full padding-left-small sm-padding-none text-small text-semibold text-uppercase text-color-heading whitespace-normal'
      class-owner='hidden'
      class-help='segment full text-small margin-bottom-medium padding-left-small'

      widget-status='solid-form-dropdown-autocompletion-label'
      enum-status=""
      widget-description='solid-form-richtext-label'
      widget-help='solid-form-hidden-label'
      widget-community.community='solid-form-dropdown-autocompletion-label'
      widget-owner='solid-form-dropdown-autocompletion-label'

      range-community.community='store://user.communities'
      option-label-community.community="community.name"
      option-value-community.community="community"

      partial=''

      submit-button=''
      submit-widget="button"
      class-submit-button="submit-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-icon-rocket children-icon-small children-icon-margin-right-xsmall"
      next=`${component.route}-information`

      data-trans='enum-status=hublStatus;label-status=circle.edit.labelStatus;label-community.community=circle.edit.labelCommunity;label-name=circle.edit.labelName;label-owner=circle.edit.labelOwner;label-description=circle.edit.labelDescription;submit-button=circle.edit.buttonSubmit;label-subtitle=circle.edit.labelSubtitle;label-help=circle.edit.descriptionHelp'
    )

  h3.segment.full.padding-bottom-small.border-bottom.border-color-grey.text-color-heading.text-bold.text-letter-spacing-large(data-trans='circle.edit.subTitle')

  solid-ac-checker(permission='acl:Append', bind-resources, nested-field='members')
    solid-form.segment.block.whitespace-normal.margin-bottom-xlarge.form(
      bind-resources 
      nested-field='members'
      fields='user'
      range-user=`${component.endpoints.users}`

      class-user='segment block margin-bottom'
      widget-user='solid-form-dropdown-autocompletion'

      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-color-secondary bordered"
      data-trans='submit-button=circle.edit.buttonAddMember'
    )

  .segment.table-wrapper
    .table
      div.table-header.bg-color-third.text-color-heading
        div.segment.table-cell.half(data-trans='circle.edit.tableHeader1')
        div.segment.table-cell.half(data-trans='circle.edit.tableHeader2')

      solid-display(
        class='table-body'
        bind-resources
        nested-field='members'
        fields='cell(segment1(user.account.picture), segment2(line1(user.name, is_admin), line2(atom, user.communities))), self'
        loader-id=`loader-${component.route}-edit`

        class-cell='segment table-cell half labelled-avatar two-lines text-left'
        class-self='segment table-cell half text-center'

        class-segment1='segment'
        class-user.account.picture='avatar'

        class-segment2='segment three-quarter margin-left-xsmall'
        class-line1='segment block'
        class-user.name='text-small text-semibold text-color-heading text-sub margin-right-medium'
        class-is_admin='segment tag color-primary'
        class-line2='segment block'
        class-atom='icon icon-large icon-third mdi-atom margin-right-xxsmall'
        class-user.communities='full'

        multiple-user.communities
        multiple-user.communities-fields="community.name"

        widget-user.account.picture='hubl-user-avatar'
        widget-is_admin='hubl-circle-edit-admin'

        action-self='self'
        widget-self='hubl-circle-edit-members-delete'
      )

      //- Only to show the table grid
      div.segment.table-cell.half