jam-cloud/app/views/clients/_account.html.erb

<!-- Account Summary Dialog -->
<div layout="screen" layout-id="account" class="screen secondary">
  <!-- header -->
  <div class="content-head">

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

    <!-- section head text -->
    <h1>my account</h1>

    <!-- section navigation -->
    <div class="content-nav">
      <a href="#" class="home-icon"><%= image_tag "content/icon_home.png", {:width => 20, :height => 15} %></a>
      <a class="arrow-left" href="#"></a>
      <a class="arrow-right op50" href="#"></a>
    </div>

  </div>
  <!-- end header -->

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

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

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

    <div class="account-left">
      <h2>identity:</h2>
    </div>

    <div class="account-mid identity">
      <strong>Email:</strong>{email}<br />
      <strong>Password:</strong> &bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;
    </div>

    <div class="right">
      <a id="account-edit-identity-link" href="#" class="button-orange">UPDATE</a>
    </div>
    <br clear="all" />

    <hr />


    <div class="account-left">
      <h2>profile:</h2>
    </div>

    <div class="account-mid profile">
      <div class="left small mr20" align="center">
        <!-- TODO FIX avatar -->
        <a href="#" class="avatar_large"><!--<img src="images/shared/avatar_jonathon.png" width="246" height="246" />--></a></div>
      <strong>Name:</strong>{name}<br />
      <strong>Location:</strong>{location}<br />
      <strong>Instruments:</strong> {instruments}
    </div>

    <div class="right">
      <a id="account-edit-profile-link" href="#" class="button-orange">UPDATE</a>
    </div>
    <br clear="all" />

    <hr />

    <div class="account-left">
      <h2>subscriptions:</h2>
    </div>

    <div class="account-mid subscriptions">
      <strong>Studio:</strong> Gold ($49.99/year)<br />
      <strong>NaaS:</strong> Yes ($29.99/year)
    </div>

    <div class="right">
      <a id="account-edit-subscriptions-link" href="#" class="button-orange">UPDATE</a>
    </div>
    <br clear="all" />

    <hr />

    <div class="account-left">
      <h2>payments:</h2>
    </div>

    <div class="account-mid payments">
      <strong>Method:</strong> MasterCard &bull;&bull;&bull;&bull; &bull;&bull;&bull;&bull; &bull;&bull;&bull;&bull; 1234<br />
      <a href="#">View Payment History</a>&nbsp;&nbsp;<a href="#">Cancel Subscription</a>
    </div>

    <div class="right">
      <a id="account-edit-payments-link" href="#" class="button-orange">UPDATE</a>
    </div>
    <br clear="all" />

    <hr />

    <div class="account-left">
      <h2>audio:</h2>
    </div>

    <div class="account-mid audio">
      <strong>Approved Profiles:</strong> HK 1, Built-in audio, Zephra1
    </div>

    <div class="right">
      <a id="account-edit-audio-link" href="#" class="button-orange">UPDATE</a>
    </div>
    <br clear="all" />
  </div>
  <!-- end content wrapper -->
</script>

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

    <div class="account-left">
      <h2>identity:</h2>
    </div>
    <form id="account-edit-email-form">
        <table width="35%" cellpadding="0" cellspacing="10" class="left mr20">
          <tr><th align="left">Update your email address:</th>
          </tr>
          <tr>
            <td>Email:<br />
              <div class="field">
                <input id="account_update_email" name="update_email" type="text" value="{email}" class="w90">
              </div>
            </td>
          </tr>

          <tr><td>
            <div class="right"><a id="account-edit-email-cancel" href="#" class="button-grey">CANCEL</a>&nbsp;&nbsp;<a id="account-edit-email-submit" href="#" class="button-orange">UPDATE EMAIL</a></div>
            <input type="submit" style="display:none"/>
          </td></tr>

        </table>
    </form>

    <form id="account-edit-password-form">
        <table width="35%" cellpadding="0" cellspacing="10" class="left">
          <tr><th align="left">Update your password:</th>
          </tr>
          <tr>
            <td>
              <div class="field">
                  Current Password:<br />
                  <input type="password" name="current_password" value="" class="w90"><br />
                  <a id="account-forgot-password" href="#" class="small">Forgot Password?</a>
              </div>
            </td>
          </tr>
          <tr>
            <td>
              <div class="field">
                  New Password:<br />
                  <input type="password" name="password" value="" class="w90">
              </div>
            </td>
          </tr>
          <tr>
            <td>
              <div class="field">
                  Retype New Password:<br />
                  <input id="account_retype_password" name="password_confirmation" type="password" value="" class="w90">
              </div>
            </td>
          <tr><td>
            <div class="right"><a id="account-edit-password-cancel" href="#" class="button-grey">CANCEL</a>&nbsp;&nbsp;<a id="account-edit-password-submit" href="#" class="button-orange">UPDATE PASSWORD</a></div>
            <input type="submit" style="display:none"/>
          </td></tr>

        </table>
    </form>

    <br clear="all" />
  </div>
  <!-- end content wrapper -->

</script>