<div layout="screen" id="account-profile-interests" layout-id="account/profile/interests" 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-interests-form">

          <h2>edit profile: current interests</h2>

          <div>
            <div class="left interest-options">
              <label>I would like to join a virtual band <a class="help" help-topic="profile-interests-virtual-band">[?]</a></label>
              <div class="yes-no-options">
                <div class="option">
                  <input type="radio" name="virtual_band" id="virtual-band-yes" class="dependent-master" value="true"/>
                  <label for="virtual-band-yes">Yes</label>
                </div>
                <div class="option">
                  <input type="radio" name="virtual_band" id="virtual-band-no" class="dependent-master" value="false" />
                  <label for="virtual-band-no">No</label>
                </div>
              </div>

            </div>

            
            <div id="virtual-band-genres" class="left genres virtual-band-dependent hidden">
              <label>Desired Genre <a class="select-genre">select</a></label>
              <span class="genre-list"></span>
            </div>

            <div class="field left play-commitment virtual-band-dependent hidden">
              <label>Play Commitment</label>
              <select id="virtual-band-commitment" name="virtual_band_commitment">
                <option value="1">infrequent</option>
                <option value="2">once a week</option>
                <option value="3">2-3 times a week</option>
                <option value="4">4+ times a week</option>
              </select>
            </div>
          </div>
        

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

          <div>
            <div class="left interest-options traditional-band">
              <label>I would like to join a traditional band <a class="help" help-topic="profile-interests-traditional-band">[?]</a></label>
              <div class="yes-no-options">
                <div class="option yes-option">
                  <input type="radio" name="traditional_band" id="traditional-band-yes" class="dependent-master" value="true" />
                  <label for="traditional-band-yes">Yes</label>
                </div>
                <div class="option no-option">
                  <input type="radio" name="traditional_band" id="traditional-band-no" class="dependent-master" value="false" />
                  <label for="traditional-band-no">No</label>
                </div>
              </div>
            </div>
            <div id="traditional-band-genres" class="left genres traditional-band-dependent hidden">
              <label>Desired Genre <a class="select-genre">select</a></label>
              <span class="genre-list"></span>
            </div>

            <div class="field left play-commitment traditional-band-dependent hidden">
              <label>Play Commitment</label>
              <select id="traditional-band-commitment" name="traditional_band_commitment">
                <option value="1">infrequent</option>
                <option value="2">once a week</option>
                <option value="3">2-3 times a week</option>
                <option value="4">4+ times a week</option>
              </select>
            </div>

            <div class="field left traditional-band-dependent hidden">
              <label>Touring Option</label>
              <select id="traditional-band-touring" name="touring">
                <option value='1'>Yes</option>
                <option value='0'>No</option>
              </select>
            </div>
          </div>

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

          <div>
            <div class="left interest-options paid-sessions">
              <label>I am available to play in paid sessions <a class="help" help-topic="profile-interests-paid-sessions">[?]</a></label>
              <div class="yes-no-options">
                <div class="option yes-option">
                  <input type="radio" name="paid_sessions" id="paid-sessions-yes" class="dependent-master" value="true" />
                  <label for="paid-sessions-yes">Yes</label>
                </div>
                <div class="option no-option">
                  <input type="radio" name="paid_sessions" id="paid-sessions-no" class="dependent-master" value="false" />
                  <label for="paid-sessions-no">No</label>
                </div>
              </div>
            </div>

            <div id="paid-sessions-genres" class="genres paid-sessions-dependent hidden">
              <label>Desired Genre <a class="select-genre">select</a></label>
              <span class="genre-list"></span>
            </div>

            <div class="field left hourly-rate-holder paid-sessions-dependent hidden">
              <label>Hourly Rate:</label>
              <input type="text" class="rate" id="hourly-rate" name="paid_sessions_hourly_rate" />
            </div>

            <div class="field left paid-sessions-dependent hidden">
              <label>Daily Rate:</label>
              <input type="text" class="rate" id="daily-rate" name="paid_sessions_daily_rate" />
            </div>
          </div>

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

          <div>
            <div class="left interest-options">
              <label>I am available to play in free sessions <a class="help" help-topic="profile-interests-free-sessions">[?]</a></label>
              <div class="yes-no-options">
                <div class="option">
                  <input type="radio" name="free_sessions" id="free-sessions-yes" class="dependent-master" value="true" />
                  <label for="free-sessions-yes">Yes</label>
                </div>
                <div class="option">
                  <input type="radio" name="free_sessions" id="free-sessions-no" class="dependent-master" value="false" />
                  <label for="free-sessions-no">No</label>
                </div>
              </div>
            </div>

            <div id="free-sessions-genres" class="left genres free-sessions-dependent hidden">
              <label>Desired Genre <a class="select-genre">select</a></label>
              <span class="genre-list"></span>
            </div>
          </div>

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

          <div>
            <div class="left interest-options">
              <label>I would like to co-write with partner(s) <a class="help" help-topic="profile-interests-cowrite-partners">[?]</a></label>
              <div class="yes-no-options">
                <div class="option">
                  <input type="radio" name="cowriting" id="cowriting-yes" class="dependent-master" value="true" />
                  <label for="cowriting-yes">Yes</label>
                </div>
                <div class="option">
                  <input type="radio" name="cowriting" id="cowriting-no" class="dependent-master" value="false" />
                  <label for="cowriting-no">No</label>
                </div>
              </div>
            </div>

            <div id="cowriting-genres" class="left genres cowriting-dependent hidden">
              <label>Desired Genre <a class="select-genre">select</a></label>
              <span class="genre-list"></span>
            </div>

            <div class="field left purpose cowriting-dependent hidden">
              <label>Purpose</label>
              <select id="cowriting-purpose" name="cowriting_purpose">
                <option value='1'>just for fun</option>
                <option value='2'>sell music</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>

