<!-- Account Summary Dialog -->
<div layout="screen" layout-id="account/profile" class="screen secondary">
  <!-- header -->
  <div class="content-head">
    <!-- icon -->
    <div class="content-icon">
      <%= image_tag "content/icon_account.png", {:width => 27, :height => 20} %>
    </div>
    <!-- section head text -->
    <h1>my account</h1>
    <%= render "screen_navigation" %>
  </div>
  <!-- end header -->

  <!-- profile scrolling area -->
  <div id="account-profile-content-scroller" class="content-scroller account-content-scroller">

  </div>
  <!-- end content scrolling area -->
</div>

<script type="text/template" id="template-account-profile">
  <!-- content wrapper -->
  <div class="content-wrapper account-profile">
    <br />

    <form id="account-edit-profile-form">
        <table width="100%" cellpadding="0" cellspacing="0">
          <tr>

            <td valign="top" width="33%"> <!-- TODO -->
              <div class="right mr30"><!--<a href="#" class="avatar_large ml10"><img src="images/shared/avatar_jonathon.png" width="246" height="246" /></a>--><br clear="left" />
                <a href="#" class="small" id="account-change-avatar">Change Avatar</a></div>
              <h2>profile:</h2>

            </td>


            <td valign="top" width="33%">
              <div class="field">
                First Name:<br />
              <input type="text" name="first_name" value="{first_name}" class="w80"><br />
                  </div>
            </td>
            <td valign="top" width="33%">
              <div class="field">
              Last Name:<br />

              <input type="text" name="last_name" value="{last_name}" class="w80">
              </div>
            </td>

          </tr>


          <tr>
            <td valign="top">
              <div class="field">
                Country:<br />

              <select name='country' class="w80"><option value='{country}' selected="selected">{country}</option></select><br /><br />
                  </div>

            </td>
            <td valign="top">
              <div class="field">
                Gender:<br />
              <select name="gender" data-value="{gender}" class="w80"><option value='M'>Male</option><option value='F'>Female</option><option >-</option></select><br />
              <br />
                  </div>
            </td>
            <td valign="top">
              <div class="field">
                Birth Date:<br />
              <%= date_select("user", "birth_date", :use_short_month => true, :start_year => 1900, :end_year => Time.now.year - 18, :order => [:month, :day, :year], :default => -25.years.from_now ) %>
                </div>
            </td>


          </tr>

          <tr>
            <td valign="top">
              <div class="field">
                State/Province:<br />
              <select name='region' class="w80" disabled='disabled'><option value="{region}" selected="selected">{region}</option></select><br /><br />
               </div>
            </td>
            <td rowspan=3 colspan=2 valign="top">
              <div class="field">
                What instruments can you play?

              <div class="profile-instrumentlist w90">
                <table class="instrument_selector" width="100%" cellpadding="0" cellspacing="6">

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

          </tr>

          <tr>
            <td valign="top">
              <div class="field">

              City:<br />
              <select name='city' class="w80" disabled='disabled'><option value="{city}" selected="selected">{city}</option></select><br /><br />
               </div>
            </td>
          </tr>
        </table>


    </form>

    <br clear="all" />
    <div class="right"><a id="account-edit-profile-cancel" href="#" class="button-grey">CANCEL</a>&nbsp;&nbsp;<a id="account-edit-profile-submit" href="#" class="button-orange">UPDATE PROFILE</a></div>
  </div>
  <!-- end content wrapper -->


</script>

<script type="text/template" id="account-profile-instrument">
  <tr data-instrument-id='{id}'>
    <td><input type="checkbox" {checked} />{description}</td>
    <td align="right" width="50%"><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>
