<% javascript "devise/registrations/edit.js" %>
<div id="user_profile">
  <h1><%= _('Edit profile') %></h1>

  <%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: {method: :put, class: "roadmap-form white_background"}) do |f| %>
    <div class="tabbed-area">
      <ul class="tabs" role="tablist">
        <li id="personal-details-tab" class="active" role="tab" aria-controls="personal-details-panel">
          <a href="#personal-details-panel" aria-selected="true">Personal Details</a>
        </li>
        <li id="password-details-tab" role="tab" aria-controls="password-details-panel">
          <a href="#password-details-panel" aria-selected="false">Password</a>
        </li>
        <li id="notification-preferences-tab" role="tab" aria-controls="notification-preferences-panel">
          <a href="#notification-preferences-panel" aria-selected="false">Notification Preferences</a>
        </li>
      </ul>

      <div class="tab-panels" role="tabpanel">
        <div id="personal-details-panel" class="tab-panel active" aria-hidden="false"
             aria-labelledby="personal-details-tab">
          <%= render partial: 'devise/registrations/personal_details', f: f %>
        </div>

        <div id="password-details-panel" aria-hidden="true" class="tab-panel" role="tabpanel"
             aria-labelledby="password-tab">
          <%= render partial: 'devise/registrations/password_details', f: f %>
        </div>

        <div id="notification-preferences-panel" aria-hidden="true" class="tab-panel"
             role="tabpanel" aria-labelledby="notification-preferences-tab">
          <%= render partial: 'users/notification_preferences' %>
        </div>
      </div>
    </div>

    <br/>

    <div class='form-input'>
      <label></label>
      <%= render partial: 'shared/accessible_submit_button',
                 locals: {id: 'update',
                          val: 'Save',
                          disabled_initially: true,
                          classes: 'small-input-button',
                          tooltip: _('Enter all of the required information above')} %>
      <%= link_to 'Cancel', '#', style: 'text-decoration:none;'  %>
    </div>
  <% end %>
</div>

<script type="text/javascript">
  $(".tab-panels div.tab-panel:not(.active)").hide();

  $(".tabs li a").click(function(e){
    e.preventDefault();

    // Make the clicked tab the active tab
    $(this).parent().addClass('active');
    $(this).attr('aria-selected', 'true');
    $.each($(this).parent().siblings(), function(i, sib){
      $(sib).removeClass('active');
      $(sib).find('> a').attr('aria-selected', 'false');
    });

    // Make the corresponding panel visible and the others hidden
    let panel = $($(this).attr("href"));
    panel.show().attr("aria-hidden", 'false');
    $.each($(panel).siblings(), function(i, p){
      $(p).hide().attr("aria-hidden", 'true');
    });
  });
</script>