%script{ type: "text/ng-template", id: "registration/introduction.html" }
  .row
    .small-12.columns
      %header
        %h2= t(".registration_greeting")
        %h4
          %small
            %i.ofn-i_040-hub
          = t(".registration_intro")

  .row.collapsible-menus-container{ 'data-equalizer' => true }
    .small-12.medium-12.large-6.columns.pad-top{ 'data-equalizer-watch' => true }
      %input#collapsible-registration-checklist.collapsible-checkbox{:type => "checkbox"}
      %label.collapsible-label.collapsible-label-md{:for => "collapsible-registration-checklist"}
        %h5= t(".registration_checklist")
      .collapsible-content.collapsible-content-md
        %ul.check-list
          %li
            = t(".registration_time")
          %li
            = t(".registration_enterprise_address")
          %li
            = t(".registration_contact_details")
          %li
            = t(".registration_logo")
          %li
            = t(".registration_promo_image")
          %li
            = t(".registration_about_us")

    .small-9.medium-8.large-5.columns.pad-top.end{ 'data-equalizer-watch' => true}
      %input#collapsible-registration-outcome.collapsible-checkbox{:type => "checkbox"}
      %label.collapsible-label.collapsible-label-md{:for => "collapsible-registration-outcome"}
        %h5= t(".registration_outcome_headline")
      .collapsible-content.collapsible-content-md
        %p= t(".registration_outcome1_html")
        %p= t(".registration_outcome2")
        %p= t(".registration_outcome3")

  .row{'ng-init' => "tos_required=#{Spree::Config.enterprises_require_tos}" }
    %hr
    .small-12.medium-6.columns{'ng-hide' => '!tos_required' }
      %p.tos-message
        #{t(:enterprise_tos_message)}
        %a{href: Spree::Config.footer_tos_url, target: "_blank" } #{t(:enterprise_tos_link_text)}
      %p.tos-checkbox
        %input{ type: 'checkbox', name: 'accept_terms', id: 'accept_terms', ng: { model: "tos_accepted" } }
          %label{for: "accept_terms"} #{t(:enterprise_tos_agree)}

    .small-12.medium-6.columns
      %input.button.primary.left{ type: "button", value: "{{'registration.steps.introduction.registration_action' | t}}", ng: { click: "select('details')", disabled: "tos_required && !tos_accepted", model: "tos_accepted"} }