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

  <!-- profile scrolling area -->
  <div id="account-content-scroller" class="content-scroller account-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">
        <a href="#" class="avatar_large"><img src="{photoUrl}" id="profile-avatar" /></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)-->
      <strong>N/A</strong><br />
      <strong>This feature not yet implemented</strong>
    </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>  -->
      <strong>N/A</strong></br />
      <strong>This feature not yet implemented</strong>
    </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> <span class="audio-profiles-short">{profiles}</span>
    </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>
