openfoodnetwork/app/views/producers/_fat.html.haml

= cache_with_locale do
  .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.fullwidth
        = render partial: "components/spinner"

    .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"}
      .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"}
              %span{"ng-bind" => "::taxon.name"}
          %div
            %span.fat-properties{"ng-repeat" => "property in producer.supplied_properties"}
              %span{"ng-bind" => "property.presentation"}

      .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.whatsapp_phone"}
          %a{"ng-href" => "{{::producer.whatsapp_url}}", target: "_blank"}
            %img{ src: image_pack_path("social-logos/whatsapp.svg") }
            %span{"ng-bind" => "::producer.whatsapp_phone"}

        %p.word-wrap{"ng-if" => "::producer.email_address"}
          %a{"ng-href" => "{{::producer.email_address | stripUrl}}", target: "_blank", mailto: true}
            %span.obfuscatedEmail.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
          .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}", "ofn-change-hub" => "hub"}
            %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"}