solid-router(default-route=`${component.route}-profile`, hidden)
  solid-route(name=`${component.route}-profile`)
  solid-route(name=`${component.route}-edit`)

div(
  id=`${component.route}-profile`
  hidden
  data-view=`${component.route}-profile`
)
  solid-ac-checker.segment.block(permission='acl:Read', bind-resources)
    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
      div.segment.full.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.lg-hidden.sm-quarter.text-right
        div.jsMobileRightMenuButton.icon.icon-options-vertical.icon-heading

  div.segment.full.padding-large.sm-padding-xsmall.sm-padding-top-xlarge
    div.loader(id=`loader-${component.route}-profile-1`)
      div
      div
      div
      div

    div.whitespace-normal
      solid-display.segment.half.sm-full.sm-margin-bottom-medium(
        bind-resources
        fields='creationDateSet(title, creationDate)'
        loader-id=`loader-${component.route}-profile-1`

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

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

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

      solid-widget(name=`hubl-circle-leave-button-${component.uniq}`)
        template
          solid-ac-checker(permission='acl:Delete', data-src="${src}")
            solid-ac-checker(no-permission='acl:Delete', data-src="${src}", nested-field='circle')
              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.profile.buttonQuit'
                next=`${component.route}-left`
              )

      .segment.full.text-right.margin-bottom-large.sm-margin-bottom-medium
        solid-display.segment(
          bind-resources
          nested-field='members'
          fields='relation'
          action-relation='relation'
          widget-relation=`hubl-circle-leave-button-${component.uniq}`
          search-fields='user'
          search-widget-user='solid-form-hidden'
          search-value-user='store://user.@id'
          disabled-empty-widget='hubl-circle-join-button'
        )
        //- https://git.startinblox.com/management/startinblox-feature-requests/issues/263
        solid-ac-checker.segment.margin-left-small(permission='acl:Delete', bind-resources)
          solid-delete(
            class='segment sm-full text-xsmall text-center children-link-button children-link-text-bold children-link-text-uppercase children-link-color-secondary bordered'
            bind-resources
            data-label=''
            data-trans='data-label=circle.profile.buttonDelete'
            next=`admin-${component.route}`
          )

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

    solid-display.segment.block.sm-hidden.whitespace-normal(
      bind-resources
      fields='description'
      widget-description='solid-display-value-markdown'
    )

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

    div.loader(id=`loader-${component.route}-profile-2`)
      div
      div
      div
      div

    solid-display.segment.full.labelled-avatar.two-lines.whitespace-normal.children.children-full.sm-children-full.children-margin-bottom-medium(
      bind-resources
      nested-field='members'
      loader-id=`loader-${component.route}-profile-2`
      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 three-quarter margin-left-xsmall'
      class-line1='segment block'
      class-user.name='text-small text-semibold text-color-heading text-sub'
      class-line2='segment block'
      class-atom='icon icon-large icon-third mdi-atom margin-right-xxsmall'
      class-user.communities='full'

      class-is_admin='segment 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'
    )

div(
  id=`${component.route}-edit`
  hidden
  data-view=`${component.route}-edit`
)
  include page-circle-edit.pug