<div layout="screen" id="account-profile-experience" layout-id="account/profile/experience" 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-experience-form">
          <h2>edit profile: musical experience</h2>

          <div class="field left">
            <label for="user-genres">What genres do you play?</label>
            <div class="genres">
              <table id="user-genres" width="100%" cellpadding="10" cellspacing="6"></table>
            </div>
          </div>

          <div class="field right w65">
            What instruments do you play?
            <div class="instruments">
              <table class="instrument_selector" width="100%" cellpadding="0" cellspacing="6">

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

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

          <div>
            <div class="field left w35">
              <label>Status</label>
              <select name="skill_level">
                <option value="">select an option</option>
                <option value='1'>Amateur</option>
                <option value='2'>Professional</option>
              </select>
            </div>

            <div class="field left w25">
              <label>Concert Gigs Played</label>
              <select name="concert_count">
                <option value="">select an option</option>
                <option value='0'>zero</option>
                <option value='1'>under 10</option>
                <option value='2'>10 to 50</option>
                <option value='3'>50 to 100</option>
                <option value='4'>over 100</option>
              </select>
            </div>

            <div class="field left w25">
              <label>Studio Sessions Played</label>
              <select name="studio_session_count">
                <option value="">select an option</option>
                <option value='0'>zero</option>
                <option value='1'>under 10</option>
                <option value='2'>10 to 50</option>
                <option value='3'>50 to 100</option>
                <option value='4'>over 100</option>
              </select>
            </div>
          </div>

          <br/><br/>

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

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


<script type="text/template" id="account-profile-instrument">
  <tr data-instrument-id='{id}'>
    <td class="acct-prf-inst-ck"><input type="checkbox" {checked} />{description}</td>
    <td align="right" width="50%" class="acct-prf-inst-drdwn">
      <select name="proficiency" class='proficiency_selector'>
        <option value="1">Beginner</option>
        <option value="2">Intermediate</option>
        <option value="3">Expert</option>
      </select>
    </td>
  </tr>
</script>

<script type="text/template" id="template-user-setup-genres">
  <tr><td class="user-genre-desc"><input value="{id}" {checked} type="checkbox" /><span>{description}</span></td></tr>
</script>
