ensl.org/app/views/users/edit.html.erb

<div id="profile-edit">
  <h1>Account: <%= h @user.username %></h1>

  <%= render 'shared/errors', messages: @user.errors.full_messages %>

  <%= form_for @user, html: { multipart: true, id: 'profile', class: 'square' } do |f| %>
    <% f.fields_for :profile do |p| %>
      <div id="user" class="tabbed">
        <ul id="user-nav" class="tabs">
          <li><a href="#account">Account</a></li>
          <li><a href="#profile">Profile</a></li>
          <li><a href="#country"><%= t('profile.locals') %></a></li>
          <li><a href="#notifications">Notifications</a></li>
        </ul>

        <div class="tabbed-contents">
          <div class="tab" id="account">
            <% if cuser and @user.can_change_name? cuser %>
            <div class="fields horizontal">
              <%= f.label :username, 'Username', class: 'required' %>
              <%= f.text_field :username %>
            </div>
            <% end %>
            <div class="fields horizontal">
              <%= f.label :raw_password, "Password" %>
              <%= f.password_field :raw_password %>
            </div>
            <div class="fields horizontal">
              <%= f.label :email do %>
                <p>Email</p>
                <em>(only visible to admins)</em>
              <% end %>
              <%= f.text_field :email %>
            </div>
            <div class="fields horizontal">
              <%= f.label :public_email %>
              <%= f.check_box :public_email %>
              <%= f.label :public_email, class: 'checkbox' %>
            </div>
            <div class="fields horizontal">
              <%= f.label :steamid %>
              <%= f.text_field :steamid, html: { placeholder: 'http://steamcommunity.com/id/...' } %>
            </div>
            <div class="fields horizontal">
              <%= f.label :firstname do %>
                <p>First Name</p>
                <em>(only visible to members)</em>
              <% end %>
              <%= f.text_field :firstname %>
            </div>
            <div class="fields horizontal">
              <%= f.label :lastname do %>
                <p>Last Name</p>
                <em>(only visible to members)</em>
              <% end %> 
              <%= f.text_field :lastname %>
            </div>
            <div class="fields horizontal">
              <%= f.label :birthdate %>
              <div class="inputs">
                <%= date_select :user, :birthdate, order: [:year, :month, :day], default: @user.birthdate, start_year: 1950 %>  
              </div>
            </div>
          </div>

          <div class="tab" id="profile">
            <div class="fields horizontal">
              <%= p.label :steam_profile, "Steam Profile URL" %>
              <%= p.text_field :steam_profile %>
            </div>
            <div class="fields horizontal">
              <%= p.label :web %>
              <%= p.text_field :web %>
            </div>
            <div class="fields horizontal">
              <%= p.label :achievements %>
              <%= p.text_area :achievements, rows: 5 %>
            </div>

            <div class="fields horizontal">
              <%= p.label :signature %>
              <%= p.text_area :signature, rows: 5 %>
            </div>

            <div class="fields horizontal">
              <label>Avatar</label>
              <%= p.file_field :avatar %>
            </div>

            <div class="fields horizontal">
              <%= p.label :stream %>
              <%= p.text_field :stream %>
            </div>
          </div>

          <div class="tab" id="country">
            <div class="fields horizontal">
              <%= f.label :country %>
              <div class="inputs">
                <%= country_select :user, :country, include_blank: true %>
              </div>
            </div>
            <div class="fields horizontal">
              <%= p.label :town %>
              <%= p.text_field :town %>
            </div>
            <div class="fields horizontal">
              <%= f.label :time_zone %>
              <div class="inputs">
                <%= f.time_zone_select :time_zone, ActiveSupport::TimeZone.all %><br><br>
                <p>Daylight savings will be observed automatically.</p>
              </div>
            </div>
            <div class="fields horizontal">
              <%= p.label :layout %>
              <div class="inputs">
                <%= p.select :layout, ['default', 'flat'] %>  
              </div>
            </div>
          </div>

          <div class="tab" id="notifications">
            <h4>Notify me when...</h4>

            <div class="fields horizontal">
              <%= p.label :notify_news, "News item are posted" %>
              <%= p.check_box :notify_news %>
              <%= p.label :notify_news, class: 'checkbox' %>
            </div>

            <div class="fields horizontal">
              <%= p.label :notify_articles, "New articles" %>
              <%= p.check_box :notify_articles %>
              <%= p.label :notify_articles, class: 'checkbox' %>
            </div>

            <div class="fields horizontal">
              <%= p.label :notify_movies, "New movies" %>
              <%= p.check_box :notify_movies %>
              <%= p.label :notify_movies, class: 'checkbox' %>
            </div>

            <div class="fields horizontal">
              <%= p.label :notify_gather, "Gather has 6 players" %>
              <%= p.check_box :notify_gather %>
              <%= p.label :notify_gather, class: 'checkbox' %>
            </div>

            <div class="fields horizontal">
              <%= p.label :notify_own_match, "My team's matches" %>
              <%= p.check_box :notify_own_match %>
              <%= p.label :notify_own_match, class: 'checkbox' %>
            </div>

            <div class="fields horizontal">
              <%= p.label :notify_any_match, "New matches" %>
              <%= p.check_box :notify_any_match %>
              <%= p.label :notify_any_match, class: 'checkbox' %>
            </div>

            <div class="fields horizontal">
              <%= p.label :notify_challenge, "New challenges" %>
              <%= p.check_box :notify_challenge %>
              <%= p.label :notify_challenge, class: 'checkbox' %>
            </div>

            <div class="fields horizontal">
              <%= p.label :notify_pms, "Private messages" %>
              <%= p.check_box :notify_pms %>
              <%= p.label :notify_pms, class: 'checkbox' %>
            </div>
          </div>
        </div>

        <div class="controls">
          <%= f.submit %>
        </div>
      </div>
    <% end %>
  <% end %>

  <script type="text/javascript">
    new Yetii({
      id: 'user'
    });
  </script>
</div>