<!-- Account Profile Screen -->
<div layout="screen" id="account-profile-basics" layout-id="account/profile" class="screen secondary">

  <div class="content-head">

    <div class="content-icon">
      <%= image_tag "content/icon_account.png", {:width => 27, :height => 20} %>
    </div>

    <h1>my account</h1>
    <%= render "screen_navigation" %>
  </div>

  <div class="content-body">
    <div id="account-profile-content-scroller" class="content-body-scroller account-content-scroller">

      <div class="content-wrapper account-profile">

        <form id="account-edit-profile-form">

           <h2>edit profile: basics</h2>
           <br /><br />
          <div class="location w25 left">
            <a href="#" class="avatar_large"><img id="avatar" /></a>
            <a href="#" class="small" id="account-change-avatar">Change Avatar</a>
            <div class="clearall"></div>

            <div class="field">
              <label>Country:</label>
              <select id="country" name='country' class="w80">
                <option selected="selected"></option>
              </select>
            </div>

            <div class="field">
              <label>State/Province:</label>
              <select id="region" name='region' class="w80" disabled='disabled'>
                <option selected="selected"></option>
              </select>
            </div>

            <div class="field">
              <label>City:</label>
              <select id="city" name='city' class="w80" disabled='disabled'>
                <option selected="selected"></option>
              </select>
            </div>
          </div>

          <div class="right-side right w70" style="margin-top:-36px;">
            <div class="field left w45">
              <label>First Name:</label>
              <input type="text" id="first-name" name="first_name" class="w70" style="margin-bottom:12px;">
            </div>
            <div class="field left w45">
              <label>Last Name:</label>
              <input type="text" id="last-name" name="last_name" class="w70" style="margin-bottom:12px;">
            </div>

            <br class="clearall"/>

            <div class="field left w45 gender">
              <label>Gender:</label>
              <select id="gender" name="gender" class="w80">
                <option value='M'>Male</option>
                <option value='F'>Female</option>
                <option value="">-</option>
              </select>
            </div>

            <br class="clearall"/>

            <div class="field">
              <label>Musical Bio:</label>
              <textarea id="biography" name="biography" class="biography"></textarea>
            </div>        

            <div class="field">
              <input type="checkbox" id="subscribe" name="subscribe_email" /> I will accept email from JamKazam about this service.
            </div>

            <div class="right field actions">
              <a class="button-grey account-edit-profile-cancel">CANCEL</a>&nbsp;&nbsp;<a class="account-edit-profile-submit button-orange">SAVE &amp; NEXT</a>
            </div>
          </div>

          <div class="clearall"></div>
        </form>

      </div>
    </div>
  </div>
</div>
