<div class="page-header">
  <div class="page-header-title">
    <h1><%- @T( 'Avatar' ) %></h1>
  </div>
  <div class="page-header-meta">
  <% if @webcamSupport: %>
    <div class="btn btn--success js-openCamera"><%- @T('Camera') %></div>
  <% end %>
    <div class="btn btn--success fileUpload"><%- @T('Upload') %><input type="file" class="js-upload" accept="image/*"></div>
  </div>
</div>
<div class="page-content avatar-gallery">
  <% for avatar in @avatars: %>
  <div class="avatar-holder">
    <% if avatar.initial: %>
      <% cssClass = '' %>
      <% if avatar.default: %>
      <%  cssClass = 'is-active' %>
      <% end %>
      <%- App.Session.get().avatar('80', '', cssClass, true, avatar) %>
    <% else: %>
      <span class="avatar size-80 <% if avatar.default: %>is-active<% end %>" data-avatar-id="<%- avatar.id %>" style="background-image: url(<%- avatar.content %>)"></span>
      <% if avatar.deletable: %>
        <div class="avatar-delete">
          <%- @Icon('diagonal-cross') %>
        </div>
      <% end %>
    <% end %>
  </div>
  <% end %>
</div>