<%= form_for(resource, as: resource_name, url: registration_path(resource_name, tab: 'personal-details-tab'), html: {method: :put, class: "roadmap-form white_background"}) do |f| %>

  <div class="profile_text">
    <p>
      <%= _("Please note that your email address is used as your username.
      If you change this, remember to use your new email address on sign in.") %>
    </p>
  </div>

  <div>
    <!-- Edit Profile -->
    <fieldset class="side-by-side">
      <legend><%= _('You can edit any of the details below.') %></legend>

      <%= hidden_field_tag :unlink_flag, "false", id: "unlink_flag" %>
      <%= hidden_field_tag :skip_personal_details, "false" %>

      <div class="form-input">
        <%= f.label(:email, _('Email'), class: 'required') %>
        <%= f.email_field(:email, class: 'left-indent required input-medium',
          title: _('Please enter your current password below when changing your email address.'),
          value: @user.email) %>
        <span role="" id="email_error" class="error-tooltip-right left-indent"></span>
      </div>

      <div class="form-input">
        <%= f.label(:firstname, _('First Name'), class: 'required') %>
        <%= f.text_field(:firstname, class: 'input-small required left-indent', value: @user.firstname) %>
      </div>
      <div class="form-input">
        <%= f.label(:surname, _('Last Name'), class: 'required') %>
        <%= f.text_field(:surname, class: 'input-small required left-indent', value: @user.surname) %>
      </div>

      <div class="form-input">
        <%= f.label(:recovery_email, _('Recovery Email'), class: 'required') %>
        <%= f.email_field(:recovery_email, class: 'left-indent required input-medium',
          title: _('This email will be used to recover your account if you change institutions'),
          value: @user.recovery_email) %>
        <span role="" id="recovery_email_error"
              class="error-tooltip-right left-indent"></span>
      </div>

      <div class="form-input">
        <%= f.label(:password, _('Password'), class: 'required') %>
        <%= f.password_field(:password, class: 'left-indent required input-medium') %>
        <span role="" id="password_error"
              class="error-tooltip-right left-indent"></span>
      </div>

      <div class="form-input accessible-combobox-smaller">
        <%= f.label(:org_name, _('Organisation')) %>
        <%= render partial: "shared/accessible_combobox",
                   locals: {name: "#{resource_name}[org_name]",
                            id: "#{resource_name}_org_name",
                            default_selection: @default_org,
                            models: @orgs,
                            attribute: 'name',
                            classes: 'left-indent input-medium'} %>
      <div id="other-org-link">
        <div style="width: 25%; text-align: right; display: inline-block; margin-right: 10px">&nbsp;</div>
        <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: <%= @other_organisations.nil? ? 'block' : 'none' %> " data-orgs="<%= other_organisations.join(',') %>">
        <%= f.label _('Organisation Name'), for: :other_organisation %>
        <%= f.text_field :other_organisation, :autocomplete => "off", :class => 'left-indent input-medium has-tooltip', 'data-toggle' => "tooltip", 'data-container' => "body", 'title' => _('Please enter the name of your organisation.') %>
      </div>
      </div>

      <% if MANY_LANGUAGES %>
        <div class="form-input">
          <% lang_id = current_user.language.nil? ? Language.id_for(FastGettext.default_locale) : current_user.language.id %>
          <%= f.label(:language_id, _('Language')) %> 
          <%= select_tag("user[language_id]",
            options_from_collection_for_select(@languages, "id", "name", lang_id),
            class: 'input-small left-indent') %>
        </div>
      <% end %>

      <% @identifier_schemes.each do |scheme| %>
          <div class="form-input">
            <% if scheme.name == 'shibboleth' %>
                <label>
                  <span class="aria-only" aria-hidden="false"><%= scheme.description %></span>
                  <i class="fa fa-user" title="<%= scheme.description %>" aria-hidden="true"></i>
                </label>
            <% else %>
                <%= label_tag(:scheme_name, scheme.name.capitalize ) %>
            <% end %>
            <div class="identifier-scheme left-indent">
              <%= render partial: "external_identifier_#{scheme.name}",
                         locals: { scheme: scheme,
                                   id: current_user.identifier_for(scheme)} %>
            </div>
          </div>
      <% end %>

      <% unless @user.api_token.blank? %>
        <div class="form-input">
          <%= f.label(:api_token, _('API token')) %>
          <div class="input-medium"><%= @user.api_token %></div>
          <%= label_tag(:api_information, _('API Information')) %>
          <div><%= link_to( _('How to use the API'), controller: "token_permission_types", action: "index")%></div>
        </div>
      <% end %>

      <br />
      <div class='form-input'>
        <div class="button-spacer">&nbsp;</div>
        <%= render partial: 'shared/accessible_submit_button',
                   locals: {id: 'update',
                            val: 'Save',
                            disabled_initially: true,
                            classes: 'small-input-button left-indent',
                            tooltip: _('Enter all of the required information above')} %>
      </div>

    </fieldset>
  </div>
<% end %>

<!-- alert for the default template-->
<div id="unlink-institutional-credentials-dialog" class="modal" style="display: none;">
  <p><%= _('You are about to unlink %{application_name} of your institutional credentials, would you like to continue?') % { :application_name => user_shibboleth_omniauth_authorize_path } %></p>
  <a href="#" id="unlink-shibboleth-cancelled" class="btn" role="button"><%= _('Cancel')%></a>
  <a href="#" id="unlink-shibboleth-confirmed" class="btn btn-primary" role="button"><%= _('Unlink account') %></a>
</div>