include templates/hubl-groups.pug

.content-box.with-form.user-profile__container

  .section.user-bio

    solid-display.avatar-display(
      bind-user=''
      fields='account.picture'
      label-account.picture=''
      widget-account.picture='solid-display-img'
    )
    
    solid-display.name-diplay(
      bind-user=''
      fields='user-name-groups(name, groups), username'

      class-name='name'

      label-groups=''
      multiple-groups=''
      widget-groups='hubl-groups-name'
      
      class-username='username'
    )

    solid-form.info-form(
      bind-user=''
      fields='profile.bio, inline-1(profile.city, email), inline-2(profile.phone, profile.website), inline-3(profile.available), account.picture, instruction'

      class-profile.bio='form-label is-light'
      label-profile.bio='short description'

      class-profile.city='form-label is-light'
      label-profile.city='your cell'

      class-email='form-label is-light'

      class-profile.phone='form-label is-light'
      label-profile.phone='phone'

      class-profile.website='form-label is-light'
      label-profile.website='your website'

      class-profile.available='form-label is-light'
      label-profile.available='your availability'

      class-account.picture='form-label is-light'
      label-account.picture='your picture'

      widget-instruction='hubl-instruction'
    )

  .section.user-skills

    solid-form(
      bind-user=''
      range-skills=`${endpoints.skills || endpoints.get.skills}`
      fields='skills'

      class-skills='form-label is-dark'
      label-skills='Your main skills (4 max.):'
      multiple-skills='solid-multiple-select'
      widget-skills='solid-form-auto-completion'
    )


  solid-widget(name='hubl-instruction')
    template
      span Show us your most beautiful smile
      p Pictures help us to know ourselves and also to recognize ourselves, so don't be afraid to show your pretty face and avoid strange avatars.