#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"

  .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
    %a.button{href: "", ng: {click: "showClosedShops()", show: "!show_closed"}}
      = t '.show_closed_shops'
    %a.button{href: "", ng: {click: "hideClosedShops()", show: "show_closed"}}
      = t '.hide_closed_shops'
    %a.button{href: main_app.map_path}= t '.show_on_map'
