div.bg-color-white
  solid-ac-checker(permission='acl:Read', bind-resources)
    div.segment.full.padding-large.border-bottom.border-color-grey
      div.segment.half.sm-full
        solid-display.text-color-heading.text-bold.text-xxlarge.text-letter-spacing-large(
          bind-resources
          fields='name'         
        )
      div.segment.half.sm-hidden.text-right
        solid-link(class="backlink", bind-resources, next=`${component.route}-profile` data-trans="communities.back")

  div.segment.full.padding-large.whitespace-normal

    solid-ac-checker(permission='acl:Write', bind-resources)
      div.loader.loader-top(id=`loader-${component.route}-edit`)
        div
        div
        div
        div
      
      solid-form.form(
        bind-resources

        fields='profile.shortDescription, profile.description, segment(logo), profile.website, profile.email, profile.phone, profile.tweeter, profile.facebook, profile.linkedin, segment1(profile.instagram)'

        label-profile.shortDescription=''
        label-profile.description=''
        label-logo=''
        label-profile.website=''
        label-profile.email=''
        label-profile.phone=''
        label-profile.tweeter=''
        label-profile.facebook=''
        label-profile.linkedin=''
        label-profile.instagram=''

        class-profile.shortDescription='segment margin-bottom-medium half sm-full padding-right-small sm-padding-none text-small text-semibold text-uppercase text-color-heading'
        class-profile.description='segment margin-bottom-medium full text-small text-semibold text-uppercase text-color-heading'

        class-segment='segment full'
        class-logo='segment margin-bottom-medium half sm-full padding-right-small sm-padding-none text-small text-semibold text-uppercase text-color-heading'
        class-profile.website='segment margin-bottom-medium third sm-full padding-right-small sm-padding-none'
        class-profile.email='segment margin-bottom-medium third sm-full padding-right-small padding-left-small sm-padding-none'
        class-profile.phone='segment margin-bottom-medium third sm-full padding-left-small sm-padding-none text-small text-semibold text-uppercase text-color-heading'

        class-profile.tweeter='segment margin-bottom-medium third sm-full padding-right-small sm-padding-none text-small text-semibold text-uppercase text-color-heading'
        class-profile.facebook='segment margin-bottom-medium third sm-full padding-right-small padding-left-small sm-padding-none text-small text-semibold text-uppercase text-color-heading'
        class-profile.linkedin='segment margin-bottom-medium third sm-full padding-left-small sm-padding-none text-small text-semibold text-uppercase text-color-heading'
        class-segment1='segment full'
        class-profile.instagram='segment margin-bottom-medium third sm-full padding-right-small sm-padding-none text-small text-semibold text-uppercase text-color-heading'
        
        widget-profile.description='solid-form-richtext-label'
        widget-profile.email='hubl-communities-edit-email'
        widget-profile.website='hubl-communities-edit-website'
        upload-url-logo

        submit-button=''
        submit-widget="button"
        next=`${component.route}-profile`

        data-trans='label-logo=communities.edit.labelLogo;label-profile.shortDescription=communities.edit.labelShortDescription;label-profile.description=communities.edit.labelDescription;label-profile.phone=communities.edit.labelPhone;label-profile.tweeter=communities.edit.labelTwitter;label-profile.facebook=communities.edit.labelFacebook;label-profile.linkedin=communities.edit.labelLinkedin;label-profile.instagram=communities.edit.labelInstagram;submit-button=communities.edit.buttonSubmit'
      )

      h3.segment.full.padding-bottom-small.border-bottom.border-color-grey.text-color-heading.text-bold.text-letter-spacing-large(data-trans='communities.edit.subTitle')

      solid-form.form(
        bind-resources

        fields='profile.picture1, profile.picture2, profile.picture3'

        upload-url-profile.picture1
        upload-url-profile.picture2
        upload-url-profile.picture3

        label-profile.picture1=''
        label-profile.picture2=''
        label-profile.picture3=''

        class-profile.picture1='segment margin-bottom-medium third sm-full padding-right-small sm-padding-none text-small text-semibold text-uppercase text-color-heading'
        class-profile.picture2='segment margin-bottom-medium third sm-full padding-right-small padding-left-small sm-padding-none text-small text-semibold text-uppercase text-color-heading'
        class-profile.picture3='segment margin-bottom-medium third sm-full padding-left-small sm-padding-none text-small text-semibold text-uppercase text-color-heading'

        submit-button=''
        submit-widget="button"
        next=`${component.route}-profile`

        data-trans='label-profile.picture1=communities.edit.labelPicture1;label-profile.picture2=communities.edit.labelPicture2;label-profile.picture3=communities.edit.labelPicture3;submit-button=communities.edit.buttonSubmit'
      )

      h3.segment.full.padding-bottom-small.border-bottom.border-color-grey.text-color-heading.text-bold.text-letter-spacing-large(data-trans='communities.edit.subTitle1')

      solid-table.form(
        bind-resources
        nested-fields='addresses'
        fields='address_line1, address_line2'

        editable-address_line1
        editable-address_line2

        label-address_line1=''
        label-address_line2=''

        widget-address_line1='solid-form-label-text'
        widget-address_line2='solid-form-label-text'

        class-address_line1='segment margin-bottom-medium half sm-full padding-right-small sm-padding-none text-small text-semibold text-uppercase text-color-heading'
        class-address_line2='segment margin-bottom-medium half sm-full padding-right-small padding-left-small sm-padding-none text-small text-semibold text-uppercase text-color-heading'

        submit-button=''
        submit-widget="button"
        next=`${component.route}-profile`

        data-trans='label-addresses.address_line1=communities.edit.labelAddressLine1;label-addresses.address_line2=communities.edit.labelAddressLine2'     
      )