.padding-small.sm-padding-none
  h2.segment.sm-hidden.margin-top-xxsmall.margin-left-xsmall.margin-bottom-medium.sm-margin-none.sm-margin-right-xsmall.sm-margin-bottom-large.sm-margin-left-xsmall.text-xlarge.text-bold.text-color-heading.text-uppercase(data-trans='communities.list.title')

  div.mobile-map-search-field.padding-top-xxsmall.margin-left-xsmall.margin-right-xsmall.sm-padding-none.sm-margin-none.sm-margin-right-xsmall.sm-margin-left-xsmall
    div.segment.quarter.sm-full
      solid-form-search.form.search-form.sm-whitespace-normal(
        id=`communities-filter-map`
        fields='filter'
        search-filter='community.name, address_line1, address_line2'
        placeholder-filter=''
        widget-filter='solid-form-placeholder-text'
        class-filter="segment margin-bottom-medium full sm-full padding-right-small sm-padding-none text-small input-bg-white children-shadow"

        submit-button=""
        submit-widget="button"
        class-submit-button="search-button segment sm-full text-xsmall children-link-button children-link-text-bold children-link-text-uppercase children-link-color-secondary bordered children-icon-arrow-right-circle children-icon-small children-icon-margin-right-xsmall"
        data-trans='placeholder-filter=communities.list.searchBy;submit-button=communities.list.searchButton'
      )
    div.segment.sm-full.text-right(style='float:right')
      solid-link.segment.children-link-rounded.children-icon-grid.children-link-reversed.color-secondary.bordered(next=`${component.route}-directory`)
        span

  solid-map.communities-map.margin-right-xsmall.margin-left-xsmall.sm-margin-none.shadow(
      data-src=`${component.endpoints.addresses}`
      loader-id=`loader-${component.route}-map`
      fields="position(segment1(community.logo), segment2(community.name, community.profile.shortDescription, community.members))"

      class-segment1="segment block margin-medium"
      class-segment2="segment full padding-top-xlarge padding-right-large padding-bottom-xlarge padding-left-large sm-padding-medium border-top border-color-grey text-center whitespace-normal"
      class-community.name="title segment block margin-bottom-xsmall text-color-heading text-xlarge text-bold"
      class-community.profile.shortDescription="segment block description text-medium margin-bottom-xsmall whitespace-normal two-lines-ellipsis"
      
      action-community.name=`${component.route}-profile`
      widget-community.name='hubl-communities-map-fix-url-name'
      widget-community.logo='hubl-admin-community-logo'
      widget-community.members="hubl-communities-profile-members-counter"
      
      clustering=""
      filtered-by=`communities-filter-map`
      style="display:block;height:698px;"
    )