<!-- Account Summary Dialog -->
<div layout="screen" layout-id="account/audio" 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-audio-content-scroller" class="content-scroller account-content-scroller">

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

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

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

    <table class="generaltable audioprofile f14" cellpadding="0" cellspacing="0">
      <tr>
        <th align="left">NAME</th>
        <th class="noborder actions">DELETE</th>
      </tr>
      {% var keys = Object.keys(data.devices); %}
      {% for (var i = 0; i < keys.length; i++) { %}
          <tr>
            <td>{{data.devices[keys[i]]}}</td>
            <td class="actions"><a href="#" data-id="{{keys[i]}}" data-purpose="delete-audio-profile" class="button-orange">DELETE</a></td>
          </tr>
      {% } %}
    </table>
    <br clear="all" />
    <div class="left"><a href="#" data-purpose="add-profile" class="button-orange">ADD NEW PROFILE</a></div><div class="right"><a href="javascript:history.go(-1)" class="button-grey">BACK</a></div>
  </div>

  <!-- end content wrapper -->

</script>

