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
        loader-id=`loader-${component.route}-edit`

        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 full 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 full 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=component.endpoints.uploads
        widget-logo="solid-form-image-label"

        submit-button=""
        submit-widget="button"

        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=component.endpoints.uploads
        upload-url-profile.picture2=component.endpoints.uploads
        upload-url-profile.picture3=component.endpoints.uploads

        widget-profile.picture1="solid-form-image-label"
        widget-profile.picture2="solid-form-image-label"
        widget-profile.picture3="solid-form-image-label"

        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"

        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-form.form(
        bind-resources
        nested-field="addresses"
        fields="address_line1, address_line2"

        label-address_line1=""
        label-address_line2=""

        widget-community="solid-form-hidden"
        widget-address_line1="solid-form-label-text"
        widget-address_line2="solid-form-label-text"

        submit-button=""
        submit-widget="button"

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

    solid-ac-checker(no-permission="acl:Write", bind-resources)
      span(data-trans="communities.edit.noPermission")