%div{style: "padding: 1.5em;"}
  %img{"src" => @group.promo_image, style: "display: block"}
  %div{style: "margin-bottom: 1em"}
    %img{"src" => @group.logo}
    %div{style: "display: inline-block; vertical-align: middle"}
      %h2{style: "margin-bottom: 0em"}= @group.name
      %div= @group.description

  #div{"ng-controller" => "TabsCtrl", style: "clear: both"}
    %tabset

      %tab{heading: 'Map',
          active: "active(\'\')",
          select: "select(\'\')"}
        = inject_json_ams "enterprises", @group.enterprises, Api::EnterpriseSerializer
        .map-container
          %map{"ng-controller" => "MapCtrl", "ng-if" => "(active(\'\') && (mapShowed = true)) || mapShowed"}
            %google-map{options: "map.additional_options", center: "map.center", zoom: "map.zoom", styles: "map.styles", draggable: "true"}
              %markers{models: "OfnMap.enterprises", fit: "true",
              coords: "'self'", icon: "'icon'", click: "'reveal'"}

      %tab{heading: 'About us',
          active: "active(\'about\')",
          select: "select(\'about\')"}
        %h3 About us
        %p= @group.long_description

      %tab{heading: 'Our producers',
          active: "active(\'producers\')",
          select: "select(\'producers\')"}
        .producers.pad-top{"ng-controller" => "GroupEnterprisesCtrl"}
          .row
            .small-12.columns.pad-top
              %h1 Our Producers
          = render partial: "shared/components/enterprise_search"
          -# TODO: find out why this is not working
          -#= render partial: "producers/filters"

          .row{bindonce: true}
            .small-12.columns
              .active_table
                %producer.active_table_node.row.animate-repeat{id: "{{producer.path}}",
                "ng-repeat" => "producer in filteredEnterprises = (Enterprises.producers | visible | searchEnterprises:query | taxons:activeTaxons)",
                "ng-controller" => "GroupEnterpriseNodeCtrl",
                "ng-class" => "{'closed' : !open(), 'open' : open(), 'inactive' : !producer.active}",
                id: "{{producer.hash}}"}

                  .small-12.columns
                    = render partial: 'producers/skinny'
                    = render partial: 'producers/fat'

                = render partial: 'shared/components/enterprise_no_results'

      %tab{heading: 'Our hubs',
          active: "active(\'hubs\')",
          select: "select(\'hubs\')"}
        #hubs.hubs{"ng-controller" => "GroupEnterprisesCtrl"}
          .row
            .small-12.columns
              %h1 Our Hubs

          = render partial: "shared/components/enterprise_search"
          -# TODO: find out why this is not working
          -#= render partial: "home/filters"

          .row{bindonce: true}
            .small-12.columns
              .active_table
                %hub.active_table_node.row.animate-repeat{id: "{{hub.hash}}",
                "ng-repeat" => "hub in filteredEnterprises = (Enterprises.hubs | visible | searchEnterprises:query  | taxons:activeTaxons | shipping:shippingTypes | showHubProfiles:show_profiles | orderBy:['-active', '+orders_close_at'])",
                "ng-class" => "{'is_profile' : hub.category == 'hub_profile', 'closed' : !open(), 'open' : open(), 'inactive' : !hub.active, 'current' : current()}",
                "ng-controller" => "GroupEnterpriseNodeCtrl"}
                  .small-12.columns
                    = render partial: 'home/skinny'
                    = render partial: 'home/fat'

                = render partial: 'shared/components/enterprise_no_results'

      %tab{heading: 'Contact us',
          active: "active(\'contact\')",
          select: "select(\'contact\')"}
        .row
          .small-6.columns
            %h3 Contact us
            - if @group.phone
              .row
                .small-2.columns
                  Call
                .small-10.columns
                  = @group.phone
            - if @group.email
              .row
                .small-2.columns
                  Email
                .small-10.columns
                  = @group.email
            - if @group.website
              .row
                .small-2.columns
                  Website
                .small-10.columns
                  = @group.website
          .small-6.columns
            %h3 Follow us
            - if @group.facebook
              .row
                .small-2.columns
                  Facebook
                .small-10.columns
                  = @group.facebook
            - if @group.instagram
              .row
                .small-2.columns
                  Instagram
                .small-10.columns
                  = @group.instagram
            - if @group.linkedin
              .row
                .small-2.columns
                  LinkedIn
                .small-10.columns
                  = @group.linkedin
            - if @group.twitter
              .row
                .small-2.columns
                  Twitter
                .small-10.columns
                  = @group.twitter
        .row
          .small-6.columns
            %h3 Address
            %p
              = @group.address.address1
              - if @group.address.address2
                %br
                = @group.address.address2
              %br
              = @group.address.city
              ,
              = @group.address.state
              = @group.address.zipcode
              %br
              = @group.address.country

  .text-center
    %p
      = @group.name
    %p
      -if @group.facebook
        %a{title:'Follow us on Facebook', href: 'https://www.facebook.com/' + @group.facebook, target: '_blank'}
          %i.ofn-i_044-facebook
      -if @group.email
        %a{title:'Email us', href: @group.email.reverse, mailto: true}
          %i.ofn-i_050-mail-circle
      -if @group.website
        %a{title:'Visit our website', href: 'http://' + @group.website, target: '_blank'}
          %i.ofn-i_049-web

= render partial: "shared/footer"