%fieldset.alpha.no-border-bottom{ ng: { show: "menu.selected.name=='Primary Details'" } }
  %legend Primary Details
  = f.field_container :name do
    = f.label :name
    %br/
    = f.text_field :name

  = f.field_container :description do
    = f.label :description
    %br/
    = f.text_field :description

  = f.field_container :on_front_page do
    = f.label :on_front_page, 'On front page?'
    %br/
    = f.check_box :on_front_page

  = f.field_container :enterprise_ids do
    = f.label :enterprise_ids, 'Enterprises'
    %br/
    = f.collection_select :enterprise_ids, Enterprise.all, :id, :name, {}, {class: "select2 fullwidth", multiple: true}

%fieldset.alpha.no-border-bottom{ ng: { show: "menu.selected.name=='About'" } }
  %legend About
  = f.field_container :long_description do
    = f.label :long_description
    %br/
    = f.text_area :long_description


%fieldset.alpha.no-border-bottom{ ng: { show: "menu.selected.name=='Images'" } }
  %legend Images
  .row
    .alpha.three.columns
      = f.label :logo, class: 'with-tip', 'data-powertip' => 'This is the logo'
      .with-tip{'data-powertip' => 'This is the logo'}
        %a What's this?
    .omega.eight.columns
      = image_tag @object.logo.url if @object.logo.present?
      = f.file_field :logo
  .row
    .alpha.three.columns
      = f.label :promo_image, class: 'with-tip', 'data-powertip' => 'This image is displayed at the top of the Group profile'
      .with-tip{'data-powertip' => 'This image is displayed at the top of the Group profile'}
        %a What's this?
    .omega.eight.columns
      = image_tag @object.promo_image.url if @object.promo_image.present?
      = f.file_field :promo_image

= f.fields_for :address do |af|
  %fieldset.alpha.no-border-bottom{ ng: { show: "menu.selected.name=='Contact'" } }
    %legend Contact
    .row
      .alpha.three.columns
        = af.label :phone
        %span.required *
      .omega.eight.columns
        = af.text_field :phone, { placeholder: "eg. 98 7654 3210"}
    .row
      .three.columns.alpha
        = af.label :address1
        %span.required *
      .eight.columns.omega
        = af.text_field :address1, { placeholder: "eg. 123 High Street"}
    .row
      .alpha.three.columns
        = af.label :address2
      .eight.columns.omega
        = af.text_field :address2
    .row
      .three.columns.alpha
        = af.label :city, 'Suburb'
        \/
        = af.label :zipcode, 'Postcode'
        %span.required *
      .four.columns
        = af.text_field :city, { placeholder: "eg. Northcote"}
      .four.columns.omega
        = af.text_field :zipcode, { placeholder: "eg. 3070"}
    .row
      .three.columns.alpha
        = af.label :state_id, 'State'
        \/
        = af.label :country_id, 'Country'
        %span.required *
      .four.columns
        = af.collection_select :state_id, af.object.country.states, :id, :name, {}, :class => "select2 fullwidth"
      .four.columns.omega
        = af.collection_select :country_id, available_countries, :id, :name, {}, :class => "select2 fullwidth"

%fieldset.alpha.no-border-bottom{ ng: { show: "menu.selected.name=='Web'" } }
  %legend Web Resources
  .row
    .alpha.three.columns
      = f.label :website
    .omega.eight.columns
      = f.text_field :website, { placeholder: "eg. www.truffles.com"}
  .row
    .alpha.three.columns
      = f.label :email
    .omega.eight.columns
      = f.text_field :email
  .row
    .alpha.three.columns
      = f.label :facebook, 'Facebook'
    .omega.eight.columns
      = f.text_field :facebook
  .row
    .alpha.three.columns
      = f.label :instagram, 'Instagram'
    .omega.eight.columns
      = f.text_field :instagram
  .row
    .alpha.three.columns
      = f.label :linkedin, 'LinkedIn'
    .omega.eight.columns
      = f.text_field :linkedin
  .row
    .alpha.three.columns
      = f.label :twitter
    .omega.eight.columns
      = f.text_field :twitter, { placeholder: "eg. @the_prof" }