  <%#= devise_error_messages! %>

  <div class="attributes">
    <div class="attributes-header clearfix">
      <h4><%=t(:sys_basic_form)%></h4>
    </div>
    <div class="attributes-body">

      <!-- Avatar -->
      <div class="control-group">
        <%= f.label t("users.avatar"),:class=>"control-label muted" %>
        <div class="controls">
          <!-- if this page editing please add class "fileupload-edit" -->
          <div class="fileupload fileupload-new clearfix <%= 'fileupload-edit' if @user.avatar.file %>" data-provides="fileupload">
            <div class="fileupload-new thumbnail pull-left">
              <% if @user.avatar? %>
                <%= image_tag(@user.avatar.thumb.url) %>
              <% else %>
                <%= image_tag "person.png" %>
              <% end %>
            </div>
            <div class="fileupload-preview fileupload-exists thumbnail pull-left"></div>
            <span class="btn btn-file">
              <span class="fileupload-new"><%= t(:select_image) %></span>
              <span class="fileupload-exists"><%= t(:change) %></span>
              <%= f.file_field :avatar %>
            </span>
            <a href="#" class="btn fileupload-exists" data-dismiss="fileupload"><%= t(:cancel) %></a>
            <div class="controls" data-toggle="buttons-checkbox">
              <label class="checkbox inline btn btn-danger fileupload-remove">
                <%= f.check_box :remove_avatar %><%= t(:remove) %>
              </label>
            </div>
          </div>
        </div>
      </div>

      <!-- First Name -->
      <div class="control-group">
          <%= f.label t("users.first_name"),{:class=>"control-label muted", :func=>"field_label"} %>
        <div class="controls add-input">
          <div class="add-target">
            <div class="input-append">
              <div class="tab-content">
                <% @site_in_use_locales.each_with_index do |locale, i| %>
                <div class="tab-pane fade <%= ( i == 0 ) ? "active in" : '' %>" id="first_name_<%= locale %>">
                    <%= f.fields_for :first_name_translations do |f| %>
                      <%= f.text_field locale, :value => (@user.first_name_translations[locale] rescue nil), :placeholder=>"#{t("users.first_name")}" %>
                    <% end %>
                </div>
                <% end %>
              </div>
              <div class="btn-group" data-toggle="buttons-radio">
                <% @site_in_use_locales.each_with_index do |locale, i| %>
                  <a class="btn <%= ( i == 0 ) ? "active" : '' %>" href="#first_name_<%= locale %>" data-toggle="tab"><%= I18nVariable.from_locale(locale) %></a>
                <% end %>
                <a href="#" class="btn remove-input"><i class="icon-trash"></i></a>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Last Name -->
      <div class="control-group">
          <%= f.label t("users.last_name"),{:class=>"control-label muted", :func=>"field_label"} %>
        <div class="controls add-input">
          <div class="add-target">
            <div class="input-append">
              <div class="tab-content">
                <% @site_in_use_locales.each_with_index do |locale, i| %>
                <div class="tab-pane fade <%= ( i == 0 ) ? "active in" : '' %>" id="last_name_<%= locale %>">
                    <%= f.fields_for :last_name_translations do |f| %>
                      <%= f.text_field locale, :value => (@user.last_name_translations[locale] rescue nil), :placeholder=>"#{t("users.last_name")}" %>
                    <% end %>
                </div>
                <% end %>
              </div>
              <div class="btn-group" data-toggle="buttons-radio">
                <% @site_in_use_locales.each_with_index do |locale, i| %>
                  <a class="btn <%= ( i == 0 ) ? "active" : '' %>" href="#last_name_<%= locale %>" data-toggle="tab"><%= I18nVariable.from_locale(locale) %></a>
                <% end %>
                <a href="#" class="btn remove-input"><i class="icon-trash"></i></a>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Mail -->
      <div class="control-group">
        <%= f.label t("users.email"),:class=>"control-label muted" %>
        <div class="controls add-input">
          <%= f.email_field :email %>
        </div>
      </div>

      <!-- ID Number -->
      <div class="control-group">
        <%= f.label t("users.sid"),:class=>"control-label muted" %>
        <div class="controls add-input">
          <%= f.text_field :sid %>
          <span class="help-block"><%= t("users.sid_note")%></span>
        </div>
      </div>

      <!-- Office Tel Number -->
      <div class="control-group">
        <%= f.label t("users.office_tel"),:class=>"control-label muted" %>
        <div class="controls add-input">
          <%= f.text_field :office_tel %>
          <span class="help-block"><%= t("users.office_tel_note")%></span>
        </div>
      </div>

      <!-- Gender -->
      <div class="control-group">
        <%= f.label t("users.sex"),:class=>"control-label muted" %>
        <div class="controls">
          <label class="radio inline">
            <%= f.radio_button :sex, "male" %><%= t('users.male')%>
          </label>
          <label class="radio inline">
            <%= f.radio_button :sex, "female" %><%= t('users.female')%>
          </label>
          <label class="radio inline">
            <%= f.radio_button :sex, "unknown" %><%= t('users.unknown')%>
          </label>
        </div>
      </div>

    </div>
  </div>