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

#circle-profile(hidden)
  include ../../templates/hubl-circle-team.pug
  
  .content-box__info.flex

    div#loader-circle-profile.loader
      div
      div
      div
      div

    .flex.space-between.with-padding.mobile-vertical-align
      solid-display.mobile-margin__bottom(
        bind-resources
        fields='creationDateSet(title, creationDate)'
        loader-id='loader-circle-profile'

        class-title='word-spacing-right'

        value-title='Date de création : '

        widget-creationDate='solid-display-date'
      )
      solid-ac-checker(permission='acl:Append', bind-resources, nested-field='members')
        solid-link(class='button mobile-full-width text-bold text-uppercase reversed button-primary bordered with-icon icon-pencil' next='circle-edit' bind-resources) Modifier et ajouter un membre


    div.flex.desktop-button__end
      solid-ac-checker(permission='acl:Delete', bind-resources)
        solid-delete(
          class='button mobile-full-width text-bold text-uppercase button-primary bordered with-icon icon-trash'
          bind-resources
          data-label='Supprimer le cercle'
        )

      solid-widget(name='hubl-circle-leave-button')
        template
          solid-delete(
            class='button mobile-full-width desktop-btn-margin__left text-bold text-uppercase reversed button-secondary bordered with-icon icon-close'
            data-src="${src}"
            data-label='Quitter le cercle'
          )

      solid-widget(name='hubl-circle-join-button')
        template
          button.button.desktop-btn-margin__left.text-bold.text-uppercase.reversed.button-primary.bordered.with-icon.icon-arrow-right-circle.flex
            solid-form(
              data-src=''
              nested-field='members'

              fields='user.@id'
              label-user.@id=''
              value-user.@id=''
              widget-user.@id='solid-form-hidden'

              hubl-inherit-bind-user2input="input[name='user.@id']"

              submit-button='Rejoindre le cercle'
            )

      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"
      )

    h2 Membres :

    solid-display.block(
      bind-resources
      fields='members'
      loader-id='loader-circle-profile'

      multiple-members=''
      widget-members='hubl-circle-team-template'
    )



#circle-edit.content-box__height(hidden)
  include page-circle-edit.pug
