solid-router(default-route='circle-profile', hidden)
  solid-route(name='circle-profile')
  solid-route(name='circle-edit')

#circle-profile(hidden, data-view="circle-profile")
  solid-ac-checker.block(permission='acl:Read', bind-resources)
    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
      solid-display.text-xxlarge.text-letter-spacing-large(
        bind-resources
        fields='name, dash, description'

        value-dash=' - '

        class-name='text-color-heading text-bold'
        class-dash='text-color-heading text-bold'          
      )

  solid-widget(name='hubl-circle-team-contact')
    template 
      solid-link.icon.icon-secondary.hover.icon-speech.margin-left-xsmall(data-src='\${value}', next='messages')
  
  div.segment.lg-full.sm-full.padding-large.sm-padding-xsmall.sm-padding-top-xlarge
    div#loader-circle-profile.loader
      div
      div
      div
      div

    div.whitespace-normal
      solid-display.segment.lg-half.sm-full.sm-margin-bottom-medium(
        bind-resources
        fields='creationDateSet(title, creationDate)'
        loader-id='loader-circle-profile'

        value-title=''
        data-trans='value-title=circle.profile.creationDate'

        widget-creationDate='solid-display-value-date'
      )

      solid-ac-checker.segment.lg-half.sm-full.text-right.margin-bottom-large(permission='acl:Append', bind-resources, nested-field='members')
        solid-ac-checker(permission='acl:Delete', bind-resources)
          solid-link(class='segment sm-full margin-bottom-large sm-margin-bottom-medium button text-xsmall text-bold text-uppercase text-center reversed color-secondary bordered icon icon-pencil' next='circle-edit' bind-resources data-trans='circle.profile.buttonModify')
        solid-ac-checker(no-permission='acl:Delete', bind-resources)
          solid-link(class='segment sm-full margin-bottom-large sm-margin-bottom-medium button text-xsmall text-bold text-uppercase text-center reversed color-secondary bordered icon icon-pencil' next='circle-edit' bind-resources data-trans='circle.profile.buttonAdd')

      solid-ac-checker.segment.lg-full.sm-full.text-right.margin-bottom-large.sm-margin-bottom-medium(permission='acl:Delete', bind-resources)
        solid-delete(
          class='segment sm-full button text-xsmall text-bold text-uppercase text-uppercase text-center color-secondary bordered'
          bind-resources
          data-label=''
          data-trans='data-label=circle.profile.buttonDelete'
          next='admin-circles'
        )

      solid-widget(name='hubl-circle-leave-button')
        template
          solid-ac-checker(no-permission='acl:Delete', data-src="${src}", nested-field="circle")
            solid-delete(
              class='button text-xsmall text-bold text-uppercase color-secondary bordered'
              data-src="${src}"
              data-label=''
              data-trans='data-label=circle.profile.buttonQuit'
              next='circle-left'
            )

      solid-widget(name='hubl-circle-join-button')
        template
          button.button.text-xsmall.text-bold.text-uppercase.reversed.color-secondary.bordered.icon.icon-arrow-right-circle
            solid-form(
              data-src=''
              nested-field='members'

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

              submit-button=''
              data-trans='submit-button=circle.profile.buttonJoin'
            )

      solid-display(
        bind-resources
        nested-field='members'
        fields='relation'
        action-relation='relation'
        widget-relation='hubl-circle-leave-button'
        search-fields='user'
        search-widget-user='solid-form-hidden'
        search-value-user=""
        empty-widget='hubl-circle-join-button'
        hubl-inherit-bind-resources='hubl-circle-join-button'
        hubl-inherit-user-id="search-value-user"
      )

    h3.text-color-heading.text-bold.text-uppercase.text-letter-spacing-large(data-trans='circle.profile.subTitle')

    solid-widget(name='hubl-circle-user-admin')
      template ${value ? "Administrateur" : ""}

    solid-display.segment.lg-full.sm-full.labelled-avatar.two-lines.whitespace-normal.children.lg-children-full.sm-children-full.children-margin-bottom-medium(
      bind-resources
      nested-field='members'
      loader-id='loader-circle-profile'
      fields='segment1(user.account.picture), segment2(line1(user.name, user, is_admin), line2(atom, user.communities))'

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

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

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

      widget-user='hubl-circle-team-contact'
      widget-user.account.picture='hubl-user-avatar'
      widget-is_admin='hubl-circle-user-admin'
    )

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