<!-- BEGIN personal -->
<div class="gadget users personalbox">
  <div class="gadget_header"><h2>{title}</h2></div>
  <div class="gadget_container">
  <div class="gadget_response"><div class="{type}">{text}</div></div>
  <form name="personalbox" action="{base_script}" method="post" enctype="multipart/form-data">
  <input type="hidden" name="gadget" value="Users" />
  <input type="hidden" name="action" value="UpdatePersonal" />
  <input type="hidden" name="MAX_FILE_SIZE" value="524288" />
  <div class="gadget_content content">
    <fieldset>
      <div class="user_avatar">{avatar}
        <input type="file" name="avatar" id="personal_avatar" onchange="previewImage(this);">
        <input type="checkbox" name="delete_avatar" id="delete_avatar" value="1">
        <label for="delete_avatar">{lbl_delete_avatar}</label>
        <script type="text/javascript">
        function previewImage(fileElement) {
            var fReader = new FileReader();
            fReader.readAsDataURL(fileElement.files[0]);
            fReader.onload = function (event) {
                document.getElementById('avatar').src = event.target.result;
            }
        }
        </script>
      </div>
      <div>
        <label for="personal_fname">{lbl_fname}:</label>
        <input name="fname" id="personal_fname" value="{fname}" type="text" />
      </div>
      <div>
        <label for="personal_lname">{lbl_lname}:</label>
        <input name="lname" id="personal_lname" value="{lname}" type="text" />
      </div>
      <div>
        <label for="user_gender">{lbl_gender}:</label>
        <select name="gender" id="user_gender">
          <option value="0" {selected_gender_0}>{gender_0}</option>
          <option value="1" {selected_gender_1}>{gender_1}</option>
          <option value="2" {selected_gender_2}>{gender_2}</option>
        </select>
      </div>
      <div>
        <label for="personal_ssn">{lbl_ssn}:</label>
        <input name="ssn" id="personal_ssn" value="{ssn}" type="text" />
      </div>
      <div id="user_dob">
        <label for="user_dob_year">{lbl_dob}:</label>
        <input name="dob_year"  id="user_dob_year"  value="{dob_year}"  type="text" />
        <input name="dob_month" id="user_dob_month" value="{dob_month}" type="text" />
        <input name="dob_day"   id="user_dob_day"   value="{dob_day}"   type="text" />
        <span><small>{dob_sample}</small></span>
      </div>
      <div>
        <label for="personal_url">{lbl_url}:</label>
        <input name="url" id="personal_url" value="{url}" type="text" style="direction: ltr;" />
      </div>
      <div>
        <label for="personal_signature">{lbl_signature}:</label>
        <textarea name="signature" id="personal_signature" cols="45" rows="4">{signature}</textarea>
      </div>
      <div>
        <label for="personal_about">{lbl_about}:</label>
        <textarea name="about" id="personal_about" cols="45" rows="4">{about}</textarea>
      </div>
      <div>
        <label for="personal_experiences">{lbl_experiences}:</label>
        <textarea name="experiences" id="personal_experiences" cols="45" rows="4">{experiences}</textarea>
      </div>
      <div>
        <label for="personal_occupations">{lbl_occupations}:</label>
        <textarea name="occupations" id="personal_occupations" cols="45" rows="4">{occupations}</textarea>
      </div>
      <div>
        <label for="personal_interests">{lbl_interests}:</label>
        <textarea name="interests" id="personal_interests" cols="45" rows="4">{interests}</textarea>
      </div>
    </fieldset>
  </div>
  <div class="gadget_actions actions"><button type="submit" value="{update}">{update}</button></div>
  </form>
  </div>
  <div class="gadget_footer"></div>
</div>
<!-- END personal -->