include templates/template-groups.pug

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

  .section.user-bio

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

      class-name='name'

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

    sib-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='hd-instruction'
    )

  .section.user-skills

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

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


  sib-widget(name='hd-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.