<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">
        <%= f.label(:firstname, _('First Name'), class: 'required') %>
        <%= f.text_field(:firstname, class: 'input-small required left-indent') %>
      </div>
    </div>
    <div class="inline">
      <div class="form-input">
        <%= f.label(:surname, _('Last Name'), class: 'required') %>
        <%= f.text_field(:surname, class: 'input-small required left-indent') %>
      </div>
    </div>
    
    <!-- Register form email address -->
    <div class="form-input">
      <%= f.label(:email, _('Email'), class: 'required') %>
      <%= f.email_field(:email, class: 'left-indent required') %>
      <span role="" id="email_error" class="error-tooltip left-indent"></span>
    </div>
    
      
    <div class="form-input">
      <%= f.label _('Organisation'), for: :user_org_name %>
      <%= render partial: "shared/accessible_combobox", 
                 locals: {name: 'user[org_name]',
                          id: 'user_org_name',
                          default_selection: @default_org,
                          models: Org.where("parent_id IS NULL").order("sort_name ASC, name ASC"),
                          attribute: 'name',
                          classes: 'input-full-width'} %>
      <div id="other-org-link" class="left-indent">
        <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 => 'left-indent has-tooltip', 'data-toggle' => "tooltip", 'data-container' => "body", 'title' => _('Please enter the name of your organisation.') %>
      </div>
    </div>
    
    <!-- Register form recovery email address -->
    <div class="form-input">
      <%= f.label(:recovery_email, _('Recovery Email'), class: 'required') %>
      <%= f.email_field(: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">
      <%= f.label(:password, _('Password'), class: 'required') %>
      <%= f.password_field(:password, class: 'left-indent required') %>
      <span role="" id="password_error" class="error-tooltip left-indent"></span>
    
      <div class="form-input checkbox-right">
        <%= label_tag(:password_show, _('Show password'), class: 'checkbox-label') %>
        <%= check_box_tag(:password_show, "1", false) %>
      </div>
    </div>
    
    <!-- Register form terms -->
    <div class="form-input top-indent">
      <%= f.check_box(:accept_terms, class: 'required right-indent') %>
      <%= f.label(:accept_terms,
          raw("#{_('I accept the')} <a href=\"#{terms_path}\">#{_('terms and conditions')}</a>"),
          class: 'no-colon') %>
    </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 %>