.row.enterprise_package_panel{ ng: { controller: 'indexPackagePanelCtrl' } }
  .alpha.eight.columns
    %div{ ng: { if: "!enterprise.is_primary_producer", switch: "enterprise.sells" } }
      .info{ ng: { switch: { when: "none" } } }
        %h3= t('js.admin.panels.enterprise_package.hub_profile')

        %p
          %strong= t('js.admin.panels.enterprise_package.hub_profile_cost')

        %p= t('js.admin.panels.enterprise_package.hub_profile_text1')

        %p= t('js.admin.panels.enterprise_package.hub_profile_text2')

      .info{ ng: { switch: { when: "any" } } }
        %h3= t('js.admin.panels.enterprise_package.hub_shop')

        %p
          %strong
            %monthly-pricing-description{ joiner: "comma" }

        %p= t('js.admin.panels.enterprise_package.hub_shop_text1')

        %p= t('js.admin.panels.enterprise_package.hub_shop_text2')

        %p= t('js.admin.panels.enterprise_package.hub_shop_text3')

      .info{ ng: { switch: { default: true } } }
        %h3
          = t('js.admin.panels.enterprise_package.choose_package')
          %i.icon-arrow-right

        %p
          %strong= t('js.admin.panels.enterprise_package.choose_package_text1')

        %p
          = t('js.admin.panels.enterprise_package.choose_package_text2')

    %div{ ng: { if: "enterprise.is_primary_producer", switch: "enterprise.sells" } }
      .info{ ng: { switch: { when: "none" } } }
        %h3= t('js.admin.panels.enterprise_package.profile_only')

        %p
          %strong= t('js.admin.panels.enterprise_package.profile_only_cost')

        %p= t('js.admin.panels.enterprise_package.profile_only_text1')

        %p= t('js.admin.panels.enterprise_package.profile_only_text2')

        %p= t('js.admin.panels.enterprise_package.profile_only_text3')

      .info{ ng: { switch: { when: "own" } } }
        %h3= t('js.admin.panels.enterprise_package.producer_shop')

        %p
          %strong
            %monthly-pricing-description{ joiner: "comma" }

        %p= t('js.admin.panels.enterprise_package.producer_shop_text1')

        %p= t('js.admin.panels.enterprise_package.producer_shop_text2')

      .info{ ng: { switch: { when: "any" } } }
        %h3= t('js.admin.panels.enterprise_package.producer_hub')

        %p
          %strong
            %monthly-pricing-description{ joiner: "comma" }

        %p= t('js.admin.panels.enterprise_package.producer_hub_text1')

        %p= t('js.admin.panels.enterprise_package.producer_hub_text2')

        %p= t('js.admin.panels.enterprise_package.producer_hub_text3')

      .info{ ng: { switch: { default: true } } }
        %h3
          = t('js.admin.panels.enterprise_package.choose_package')
          %i.icon-arrow-right

        %p
          %strong= t('js.admin.panels.enterprise_package.choose_package_text1')

        %p
          = t('js.admin.panels.enterprise_package.choose_package_text2')

  .omega.eight.columns{ ng: { switch: "enterprise.is_primary_producer" } }
    %div{ ng: { switch: { when: "false" } } }
      %a.button.selector.hub-profile{ ng: { click: "enterprise.owned && (enterprise.sells='none')", class: "{selected: enterprise.sells=='none', disabled: !enterprise.owned}" } }
        .top
          %h3= t('js.admin.panels.enterprise_package.profile_only')
          %p= t('js.admin.panels.enterprise_package.get_listing')
        .bottom= t('js.admin.panels.enterprise_package.always_free')
      %a.button.selector.hub{ ng: { click: "enterprise.owned && (enterprise.sells='any')", class: "{selected: enterprise.sells=='any', disabled: !enterprise.owned}" } }
        .top
          %h3= t('js.admin.panels.enterprise_package.hub_shop')
          %p= t('js.admin.panels.enterprise_package.sell_produce_others')
        .bottom
          %monthly-pricing-description{ joiner: "newline" }

    %div{ ng: { switch: { when: "true" } } }
      %a.button.selector.producer-profile{ ng: { click: "enterprise.owned && (enterprise.sells='none')", class: "{selected: enterprise.sells=='none', disabled: !enterprise.owned}" } }
        .top
          %h3= t('js.admin.panels.enterprise_package.profile_only')
          %p= t('js.admin.panels.enterprise_package.get_listing')
        .bottom= t('js.admin.panels.enterprise_package.always_free')
      %a.button.selector.producer-shop{ ng: { click: "enterprise.owned && (enterprise.sells='own')", class: "{selected: enterprise.sells=='own', disabled: !enterprise.owned}" } }
        .top
          %h3= t('js.admin.panels.enterprise_package.producer_shop')
          %p= t('js.admin.panels.enterprise_package.sell_own_produce')
        .bottom
          %monthly-pricing-description{ joiner: "newline" }

      %a.button.selector.producer-hub{ ng: { click: "enterprise.owned && (enterprise.sells='any')", class: "{selected: enterprise.sells=='any', disabled: !enterprise.owned}" } }
        .top
          %h3= t('js.admin.panels.enterprise_package.producer_hub')
          %p= t('js.admin.panels.enterprise_package.sell_both')
        .bottom
          %monthly-pricing-description{ joiner: "newline" }

    %a.button.update.fullwidth{ ng: { show: "enterprise.owned", class: "{disabled: saved() && !saving, saving: saving}", click: "save()" } }
      %span{ ng: {hide: "saved() || saving" } }
        = t('js.admin.panels.save')
        %i.icon-save
      %span{ ng: {show: "saved() && !saving" } }
        = t('js.admin.panels.saved')
        %i.icon-ok-sign
      %span{ ng: {show: "saving" } }
        = t('js.admin.panels.saving')
        %i.icon-refresh