<h2 aria-hidden="false" class="aria-only"><%= _('Create account') %></h2>

<%= form_for resource, as: 'user', url: registration_path("user"), html: {autocomplete: "off", class: "roadmap-form register-form"} do |f| %>
  <fieldset id="create-account-form" class="standard padded">
    <div class="inline">
      <div class="form-input">
        <label for="user_firstname"><%= _('First Name') %></label>
        <input type="text" id="user_firstname" name="user[firstname]" 
               class="input-small required left-indent" />
      </div>
    </div>
    <div class="inline">
      <div class="form-input">
        <label for="user_surname"><%= _('Last Name') %></label>
        <input type="text" id="user_surname" name="user[surname]" 
               class="input-small required left-indent" />
      </div>
    </div>
    
    <!-- Register form email address -->
    <div class="form-input">
      <label for="user_email"><%= _('Email') %></label>
      <input type="email" id="user_email" name="user[email]" class="left-indent required" />
      <span role="" id="email_error" class="error-tooltip left-indent"></span>
    </div>
    
    <div class="form-input">
      <%= collection_select(:user, :org_id, Org.where("parent_id IS NULL").order("sort_name ASC, name ASC"), :id, :name, {include_blank: _('Organisation')}, { :class => 'typeahead org_sign_up', 'data-allow-clear': false }) %>
    </div>
    <div id="other-org-link form-input">
      <a href="#"><%= _("My organisation isn't listed.") %></a>
    </div>
    <% other_organisations = Org.where("parent_id IS ? AND is_other = ?", nil, true).pluck(:id) %>
    <div id="other-org-name" class="form-input" style="display:none" data-orgs="<%= other_organisations.join(',') %>">
      <%= f.label _('Organisation Name'), for: :other_organisation %>
      <%= f.text_field :other_organisation, :autocomplete => "off", :class => 'text_field has-tooltip reg-input', 'data-toggle' => "tooltip", 'data-container' => "body", 'title' => _('Please enter the name of your organisation.') %>
    </div>
    
    <!-- Register form recovery email address -->
    <div class="form-input">
      <label for="user_email"><%= _('Recovery Email') %></label>
      <input type="email" id="user_recovery_email" name="user[recovery_email]" 
             class="left-indent required"
              title="<%= _('We will only use this address to recover your account if you change institutions') %>"/>
      <span role="" id="recovery_email_error" class="error-tooltip left-indent"></span>
    </div>
    
    <!-- Register form password -->
    <div class="form-input">
      <label for="user_password"><%= _('Password') %></label>
      <input type="password" id="user_password" name="user[password]" 
             class="left-indent required" value="" />
      <span role="" id="password_error" class="error-tooltip left-indent"></span>
    
      <div class="form-input checkbox-right">
        <label for="password_show" class="checkbox-label"><%= _('Show password') %></label>
        <input type="checkbox" id="password_show" />
      </div>
    </div>
    
    <!-- Register form terms -->
    <div class="form-input top-indent">
      <input type="checkbox" id="user_accept_terms" name="user[accept_terms]" 
             class="required right-indent" />
      <label for="user_accept_terms"><%= _('I accept the') %> <a href="<%= terms_path %>"><%= _('terms and conditions') %></a></label>
    </div>          
    
    <div class="form-input top-indent">
      <%= render partial: 'shared/accessible_submit_button',
                 locals: {id: 'register-button', 
                          val: _('Create account'), 
                          disabled_initially: true,
                          classes: 'small-input-button left-indent',
                          tooltip: _('Enter all of the information above')} %>
    </div>
  </fieldset>
<% end %>