<!-- Account Summary Dialog -->
<div layout="screen" layout-id="account/audio" class="screen secondary" id="account-audio-profile">
  <!-- 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 class="content-body">
    <div id="account-audio-content-scroller" class="content-body-scroller account-content-scroller">
      <!-- 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">
          <thead>
          <tr>
            <th align="left">NAME</th>
            <th class="noborder actions">ACTIONS</th>
          </tr>
          </thead>
          <tbody>

          </tbody>
        </table>
        <br clear="all" />
        <div class="left">
          <a href="#" data-purpose="add-profile" class="button-orange">ADD NEW GEAR</a>
          <a href="#" data-purpose="reload-audio" class="button-orange">RESCAN SYSTEM FOR EXTERNAL DEVICES</a>
          <span class="rescanning-notice"><span class="spinner-small"></span><span>Rescanning...</span></span>
        </div>
        <div class="right">
          <a href="javascript:history.go(-1)" class="button-grey">BACK</a>
        </div>
      </div>
    </div>
  </div>
  <!-- end content scrolling area -->
</div>

<script type="text/template" id="template-account-audio">
<tbody>
      {% for (var i = 0; i < data.profiles.length; i++) { %}
      {% var profile = data.profiles[i]; %}
          <tr data-status="{{profile.class}}" data-current="{{profile.current}}">
            <td>{{profile.id}} <span data-current="{{profile.current}}">{{profile.active_text}}</span></td>
            <td class="actions">
            <a href="#" data-id="{{profile.id}}" data-purpose="activate-audio-profile" class="button-orange">ACTIVATE</a>
            {% if(data.is_admin) { %}
            <a href="#" data-id="{{profile.id}}" data-purpose="loopback-audio-profile" class="button-orange">LOOPBACK (admin only)</a>
            {% } %}
            <a href="#" data-id="{{profile.id}}" data-purpose="configure-audio-profile" class="button-orange">CONFIGURE</a>
            <a href="#" data-id="{{profile.id}}" data-purpose="delete-audio-profile" class="button-orange">DELETE</a></td>
          </tr>
      {% } %}

          </tbody>

</script>

