div.community-profile.padding-medium.sm-padding-none
  div.segment.full.sm-hidden.text-right
    solid-link.backlink.text-xlarge.line-xlarge.margin-right-xxsmall(next=`${component.route}-directory` data-trans="communities.back")

  div.segment.block.shadow.bg-color-white.margin-right-xxsmall.margin-top-large.margin-left-xxsmall.sm-margin-none

    div.loader(id=`loader-${component.route}-profile`)
      div
      div
      div
      div

    solid-display.segment.block.whitespace-normal(
      fields="segment0(segment1(community-picture(logo)), segment2(segment3(segment4(name),segment5(profile.tweeter, profile.facebook, profile.linkedin, profile.instagram)), segment6(profile.shortDescription), segment7(profile.tweeter, profile.facebook, profile.linkedin, profile.instagram), segment8(addresses, members, profile.website, profile.email, profile.phone), segment9(profile.description), segment10(edit))), segment11(profile.picture1, profile.picture2, profile.picture3)"
      loader-id=`loader-${component.route}-profile`

      class-segment0="segment full padding-xlarge sm-padding-none whitespace-normal"
      class-segment1="community-profile-logo segment quarter sm-full margin-top-medium padding-top-medium padding-right-medium sm-margin-top-xsmall sm-padding-medium text-center"

      class-segment2="segment three-quarter sm-full sm-padding-top-medium sm-padding-right-xsmall sm-padding-bottom-medium sm-padding-left-xsmall text-top whitespace-normal"

      class-segment3="segment full sm-full"
      class-segment4="segment half sm-full padding-top-xsmall"
      class-name="segment block text-color-heading text-xxlarge text-bold sm-text-center margin-bottom-xxsmall whitespace-normal"
      class-segment5="segment half text-right sm-hidden"
      
      class-segment6="segment two-third sm-full padding-top-xsmall sm-text-center"
      class-profile.shortDescription="segment block sm-text-center margin-bottom-large whitespace-normal"

      class-segment7="segment lg-hidden sm-full sm-text-center"

      class-segment8="segment two-third sm-full padding-bottom-large sm-padding-top-large padding-bottom-xxsmall sm-text-left"
      class-addresses="segment block margin-bottom-xsmall"
      class-members="segment block margin-bottom-xsmall"
      class-profile.website="segment block"
      class-profile.email="segment block"
      class-profile.phone="segment block"

      class-segment9="segment full"
      class-profile.description="segment full whitespace-normal line-xlarge"

      class-segment10="segment full text-right"

      class-segment11="segment full whitespace-normal"
      class-profile.picture1="communities-profile-picture segment third sm-full text-top"
      class-profile.picture2="communities-profile-picture segment third sm-full text-top"
      class-profile.picture3="communities-profile-picture segment third sm-full text-top"

      widget-logo="orbit-communities-profile-logo"
      widget-profile.description="solid-display-value-markdown"
      widget-profile.tweeter="orbit-communities-profile-twitter"
      widget-profile.facebook="orbit-communities-profile-facebook"
      widget-profile.linkedin="orbit-communities-profile-linkedin"
      widget-profile.instagram="orbit-communities-profile-instagram"
      widget-addresses="orbit-communities-profile-address"
      widget-members="orbit-communities-profile-members-counter"
      widget-profile.website="orbit-communities-profile-website"
      widget-profile.email="orbit-communities-profile-email"
      widget-profile.phone="orbit-communities-profile-phone"
      widget-profile.picture1="orbit-communities-profile-picture"
      widget-profile.picture2="orbit-communities-profile-picture"
      widget-profile.picture3="orbit-communities-profile-picture"
      action-edit="edit"
      widget-edit="orbit-communities-edit-button"
      multiple-addresses
      multiple-addresses-fields="address_line1, address_line2"

      bind-resources
    )

    solid-map.communities-profile-map(
      bind-resources
      nested-field="addresses"
      fields="position(community.name, address_line1, address_line2)"
      class-community.name="segment block margin-bottom-xsmall text-color-heading text-xlarge text-bold text-center"
      class-address_line1="segment block"
      class-address_line2="segment block"
      clustering=""
      style="display:block;height:450px;"
    )