.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.half.sm-full
      solid-form-search.form.search-form.search-button(
        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 sm-margin-bottom-none three-quarter sm-full padding-right-small sm-padding-none text-small input-bg-white children-shadow"

        submit-button=""
        submit-widget="button"
        data-trans='placeholder-name=communities.list.searchBy;submit-button=communities.list.searchButton'
      )
    div.segment.half.sm-full.text-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(community.name, community.profile.shortDescription, address_line1, address_line2)"
      class-position="segment"
      clustering=""
      filtered-by=`communities-filter-map`
      style="display:block;height:698px;"
    )