.container#registration-address
  .header
    %h2
      Greetings
      %span{ ng: { class: "{brick: enterprise.is_distributor, turquoise: !enterprise.is_distributor}" } }
        {{ enterprise.name }}

    %h5 Now we need to know where you are
  %ng-include{ src: "'registration/steps.html'" }
  %form{ name: 'address', novalidate: true, ng: { controller: "RegistrationFormCtrl", submit: "selectIfValid('contact',address)" } }
    .row.content
      .small-12.medium-12.large-7.columns
        .row
          .small-12.columns.field
            %label{ for: 'enterprise_address' } Address:
            %input.chunky.small-12.columns{ id: 'enterprise_address', name: 'address1', required: true, placeholder: "eg. 123 Cranberry Drive", required: true, ng: { model: 'enterprise.address.address1' } }
            %span.error.small-12.columns{ ng: { show: "address.address1.$error.required && submitted" } }
              You need to enter an address.
        .row
          .small-12.large-8.columns.field
            %label{ for: 'enterprise_city' } Suburb:
            %input.chunky.small-12.columns{ id: 'enterprise_city', name: 'city', required: true, placeholder: "eg. Northcote", ng: { model: 'enterprise.address.city' } }
            %span.error.small-12.columns{ ng: { show: "address.city.$error.required && submitted" } }
              You need to enter a suburb.
          .small-12.large-4.columns.field
            %label{ for: 'enterprise_zipcode' } Postcode:
            %input.chunky.small-12.columns{ id: 'enterprise_zipcode', name: 'zipcode', required: true, placeholder: "eg. 3070", ng: { model: 'enterprise.address.zipcode' } }
            %span.error.small-12.columns{ ng: { show: "address.zipcode.$error.required && submitted" } }
              You need to enter a postcode.
        .row
          .small-12.large-8.columns.field
            %label{ for: 'enterprise_country' } Country:
            %select.chunky.small-12.columns{ id: 'enterprise_country', name: 'country', required: true, ng: { model: 'enterprise.country', options: 'c as c.name for c in countries' } }
            %span.error.small-12.columns{ ng: { show: "address.country.$error.required && submitted" } }
              You need to enter a country.
          .small-12.large-4.columns.field
            %label{ for: 'enterprise_state' } State:
            %select.chunky.small-12.columns{ id: 'enterprise_state', name: 'state', ng: { model: 'enterprise.address.state_id', options: 's.id as s.abbr for s in enterprise.country.states', show: 'countryHasStates()', required: 'countryHasStates()' } }
            %span.error.small-12.columns{ ng: { show: "address.state.$error.required && submitted" } }
              You need to enter a state.
      .small-12.medium-12.large-5.hide-for-small-only
        // This is the location area
        / %h6
        /   Location display
        /   %i.ofn-i_013-help.has-tip{ 'data-tooltip' => true, title: "Choose how you want to display your enterprise's address on the Open Food Network. By default, full location is shown everywhere including street name and number."}
        / .row
        /   .small-12.columns
        /     %label.indent-checkbox
        /       %input{ type: 'checkbox', id: 'enterpise_suburb_only', ng: { model: 'enterprise.suburb_only' } }
        /         Hide my street name and street number from the public (ie. only show the suburb)
        /   .small-12.columns
        /     %label.indent-checkbox
        /       %input{ type: 'checkbox', id: 'enterprise_on_map', ng: { model: 'enterprise.on_map' } }
        /         Blur my location on the map (show an approximate, not exact pin)

    .row.buttons
      .small-12.columns
        %input.button.secondary{ type: "button", value: "Back", ng: { click: "select('details')" } }
         
        %input.button.primary{ type: "submit", value: "Continue" }