<% javascript "views/devise/registrations/edit.js" %>

<h1><%= _('Edit profile') %></h1>

<div class="content">
  <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' %>
      </div>

      <div id="password-details-panel" aria-hidden="true" class="tab-panel" role="tabpanel"
           aria-labelledby="password-tab">
        <%= render partial: 'devise/registrations/password_details' %>
      </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>
</div>

<script type="text/javascript">
  selectActiveTab();
</script>