.row.active_table_row{"ng-if" => "open()", "ng-click" => "toggle($event)", "ng-class" => "{'open' : open()}"}
  .columns.small-12.fat.text-center{"ng-show" => "open() && shopfront_loading"}
    %p
      %img.spinner.text-center{ src: "/assets/spinning-circles.svg" }

  .columns.small-12.medium-7.large-7.fat{"ng-show" => "open() && !shopfront_loading"}
    / Will add in long description available once clean up HTML formatting producer.long_description
    %div{"ng-if" => "::producer.description"}
      %label
        = t :producers_about
      %img.right.show-for-medium-up{"ng-src" => "{{::producer.logo}}" }
      %p.text-small{ "ng-bind" => "::producer.description"}
    %div.show-for-medium-up{"ng-if" => "::producer.description.length==0"}
      %label  
      %img.right.show-for-medium-up{"ng-src" => "{{::producer.logo}}" }

  .columns.small-12.medium-5.large-5.fat{"ng-show" => "open() && !shopfront_loading"}

    %div{"ng-if" => "::producer.supplied_taxons"}
      %label
        = t :producers_buy
      %p.trans-sentence
        %div
          %span.fat-taxons{"ng-repeat" => "taxon in producer.supplied_taxons"}
            %render-svg{path: "{{taxon.icon}}"}
            %span{"ng-bind" => "::taxon.name"}
        %div
          %span.fat-properties{"ng-repeat" => "property in producer.supplied_properties"}
            %span{"ng-bind" => "property.presentation"}

    %div.show-for-medium-up{"ng-if" => "producer.supplied_taxons.length==0"}
       

    %div{"ng-if" => "::producer.email_address || producer.website || producer.phone"}
      %label
        = t :producers_contact

      %p.word-wrap{"ng-if" => "::producer.phone"}
        = t :producers_contact_phone
        %span{"ng-bind" => "::producer.phone"}

      %p.word-wrap{"ng-if" => "::producer.email_address"}
        %a{"ng-href" => "{{::producer.email_address | stripUrl}}", target: "_blank", mailto: true}
          %span.email{"ng-bind" => "::producer.email_address | stripUrl"}

      %p.word-wrap{"ng-if" => "::producer.website"}
        %a{"ng-href" => "http://{{::producer.website | stripUrl}}", target: "_blank" }
          %span{"ng-bind" => "::producer.website | stripUrl"}

    %div{"ng-if" => "::producer.twitter || producer.facebook || producer.linkedin || producer.instagram"}
      %label
        = t :producers_social
      .follow-icons
        %span{"ng-if" => "::producer.twitter"}
          %a{"ng-href" => "http://twitter.com/{{::producer.twitter}}", target: "_blank"}
            %i.ofn-i_041-twitter

        %span{"ng-if" => "::producer.facebook"}
          %a{"ng-href" => "http://{{::producer.facebook | stripUrl}}", target: "_blank"}
            %i.ofn-i_044-facebook

        %span{"ng-if" => "::producer.linkedin"}
          %a{"ng-href" => "http://{{::producer.linkedin | stripUrl}}", target: "_blank"}
            %i.ofn-i_042-linkedin

        %span{"ng-if" => "::producer.instagram"}
          %a{"ng-href" => "http://instagram.com/{{::producer.instagram}}", target: "_blank"}
            %i.ofn-i_043-instagram

.row.active_table_row.pad-top{"ng-if" => "open() && producer.hubs && !shopfront_loading"}
  .columns.small-12{"ng-if" => "producer.hubs.length > 0"}
    .row
      .columns.small-12.fat
        %div{"ng-if" => "::producer.name"}
          %label
            = t :producers_buy_at_html, {enterprise: '<span class="turquoise" ng-bind="::producer.name"></span>'.html_safe}
        %div.show-for-medium-up{"ng-if" => "::!producer.name"}
          &nbsp;
    .row.cta-container
      .columns.small-12
        %a.cta-hub{"ng-repeat" => "hub in producer.hubs | orderBy:'-active'",
        "ng-href" => "{{::hub.path}}", "ng-attr-target" => "{{ embedded_layout ? '_blank' : undefined }}",
        "ng-class" => "::{primary: hub.active, secondary: !hub.active}"}
          %i.ofn-i_068-shop-reversed{"ng-if" => "::hub.active"}
          %i.ofn-i_068-shop-reversed{"ng-if" => "::!hub.active"}
          .hub-name{"ng-bind" => "::hub.name"}
          .button-address{"ng-bind" => "::[hub.address.city, hub.address.state_name] | printArray"}