#hubs.hubs{"ng-controller" => "EnterprisesCtrl", "ng-cloak" => true}
  .row
    .small-12.columns
      %h1{"scroll-after-load" => (spree_current_user ? true : nil)}
        = t :hubs_intro

  = render "shared/components/enterprise_search"
  = render "filters"

  = cache_with_locale do
    .row
      .small-12.columns
        .name-matches{"ng-show" => "nameMatchesFiltered.length > 0"}
          %h2
            = t :hubs_matches
          = render "hubs_table", enterprises: "nameMatches"

        .distance-matches{"ng-if" => "nameMatchesFiltered.length == 0 || distanceMatchesShown"}
          %h2{"ng-show" => "nameMatchesFiltered.length > 0 || query.length > 0"}
            = t :hubs_matches
            %span{"ng-show" => "nameMatchesFiltered.length > 0"} {{ nameMatchesFiltered[0].name }}...
            %span{"ng-hide" => "nameMatchesFiltered.length > 0"} {{ query }}...

          = render "hubs_table", enterprises: "distanceMatches"

        .show-distance-matches{"ng-show" => "nameMatchesFiltered.length > 0 && !distanceMatchesShown"}
          %a{href: "", "ng-click" => "showDistanceMatches()"}
            = t :hubs_distance_filter, location: "{{ nameMatchesFiltered[0].name }}"
    .more-controls
      %span{ "ng-show": "closed_shops_loading", "ng-cloak": true }
        = render partial: "components/spinner"
      %span{ "ng-if": "!show_closed", "ng-cloak": true }
        %a.button{ href: "", "ng-click": "showClosedShops()" }
          = t '.show_closed_shops'
      %span{ "ng-if": "show_closed", "ng-cloak": true }
        %a.button{ href: "", "ng-click": "hideClosedShops()" }
          = t '.hide_closed_shops'
      %a.button{href: main_app.map_path}= t '.show_on_map'