<div class="modal fade" id="password-confirmation" tabindex="-1" role="dialog" aria-labelledby="modal-title">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Please confirm your changes</h4>
      </div>
      <div id="confirmation" class="modal-body">
        <div id="email-change">
          <p><%= _('Your email address is also your login id and therefore an important part of your account information. For your safety we require you to confirm your password to make this change.') %></p>
          <div class="form-group">
            <%= f.label :current_password, _('Password'), class: 'control-label', for: 'current_password' %>
            <%= f.password_field :current_password, class: 'form-control', id: 'current_password' %>
            <%= f.password_field :password, class: 'hide' %>
          </div>
        </div>

        <div id="org-change" class="hide">
          <p>
            <%= _('Are you sure you want to change your organisational affiliation? Doing so will remove your administrative privileges.') %>
          </p>
          <div class="form-group">
            <label class="control-label"><%= _('Organisation') %></label>
          </div>
          <div class="checkbox">
            <label>
              <input type="checkbox" id="confirm_org_change" />
              <%= _('Yes, I understand that I will lose my administrative privileges') %>
            </label>
          </div>
        </div>
      </div>

      <div class="modal-footer">
        <button type="button" class="btn btn-default" id="pwd-cancel-confirmation" 
                data-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-primary" id="pwd-confirmation"
                data-dismiss="modal">Continue</button>
      </div>
    </div>
  </div>
</div>