<table class="table table-striped table-hover">
  <thead>
    <tr>
      <th style="width: 40px;">
        <label class="checkbox-replacement checkbox-replacement--fullscreen">
          <input type="checkbox" class="js-checkAll">
          <%- @Icon('checkbox', 'icon-unchecked') %>
          <%- @Icon('checkbox-checked', 'icon-checked') %>
        </label>
      </th>
      <th><%- @T('From') %></th>
      <th><%- @T('To') %></th>
      <!--<th style="width: 100px;"><%- @T('Queue') %></th>-->
      <th style="width: 130px;"><%- @T('Status') %></th>
      <th style="width: 80px;"><%- @T('Waiting') %></th>
      <th style="width: 80px;"><%- @T('Duration') %></th>
      <th style="width: 170px;"><%- @T('Time') %></th>
    </tr>
  </thead>
  <tbody>
    <% for item in @list: %>
    <tr class="u-center js-callerLog <% if item.done: %> is-grayed-out<% end %>" data-id="<%- item.id %>">
      <td class="table-checkbox u-positionOrigin">
        <label class="checkbox-replacement checkbox-replacement--fullscreen<% if item.disabled is true: %> is-disabled<% end %>">
          <input type="checkbox" class="js-check"<% if item.done: %> checked<% end %><% if item.disabled is true: %> disabled<% end %>>
          <%- @Icon('checkbox', 'icon-unchecked') %>
          <%- @Icon('checkbox-checked', 'icon-checked') %>
        </label>
      </td>
      <td>
        <% shown = false %>
        <% if item.preferences.from && !_.isEmpty(item.preferences.from): %>
          <% for caller_id in item.preferences.from: %>
            <% if caller_id.user_id && App.User.exists(caller_id.user_id): %>
              <% if shown: %><div class="spacer"></div><% end %>
              <div class="user-card">
                <div class="js-avatar" data-id="<%- caller_id.user_id %>" data-level="<%= caller_id.level %>"></div>
                <a class="text-muted" href="<%- App.Utils.phoneify(item.from_pretty) %>"><%= item.from_pretty %></a>
              </div>
              <% shown = true %>
            <% else if !_.isEmpty(caller_id.comment): %>
              <% shown = true %>
              <div class="user-card">
                <%- @unique_avatar(caller_id.comment, caller_id.comment.split(" ").map((name) -> name[0]).join("")) %>
                <%- @T('maybe') %>: <%= caller_id.comment %><br>
                <a class="text-muted" href="<%- App.Utils.phoneify(item.from_pretty) %>"><%= item.from_pretty %></a>
              </div>
            <% end %>
          <% end %>
        <% end %>
        <% if !shown && !_.isEmpty(item.from_comment): %>
          <% shown = true %>
          <div class="user-card">
            <%- @unique_avatar(item.from_comment, item.from_comment.split(" ").map((name) -> name[0]).join("")) %>
            <%= item.from_comment %><br>
            <a class="text-muted" href="<%- App.Utils.phoneify(item.from_pretty) %>"><%= item.from_pretty %></a>
          </div>
        <% end %>
        <% if !shown: %>
          <div class="user-card">
            <%- @unique_avatar(item.from_pretty || item.from, '??') %>
          <% if !_.isEmpty(item.from_pretty): %>
            <a class="inherit-color" href="<%- App.Utils.phoneify(item.from_pretty) %>"><%= item.from_pretty %></a>
            <% if item.direction is 'in': %>
            <div class="btn btn--text btn--create no-padding js-newUser" href="#" data-phone="<%= item.from_pretty %>"><%- @Icon('plus-small') %> <span><%- @T('New User') %></div>
            <% end %>
          <% else: %>
            <a class="inherit-color" href="<%- App.Utils.phoneify(item.from) %>"><%= item.from %></a>
          <% end %>
          </div>
        <% end %>
      </td>
      <td>
        <% shown = false %>
        <% if item.preferences.to && !_.isEmpty(item.preferences.to): %>
          <% for caller_id in item.preferences.to: %>
            <% if caller_id.user_id && App.User.exists(caller_id.user_id): %>
              <% shown = true %>
              <div class="user-card">
                <div class="js-avatar" data-id="<%- caller_id.user_id %>" data-level="<%= caller_id.level %>"></div>
                <a class="text-muted" href="<%- App.Utils.phoneify(item.to_pretty) %>"><%= item.to_pretty %></a>
              </div>
            <% else if !_.isEmpty(caller_id.comment): %>
              <% shown = true %>
              <div class="user-card">
                <%- @unique_avatar(caller_id.comment, caller_id.comment.split(" ").map((name) -> name[0]).join("")) %>
                <%- @T('maybe') %>: <%= caller_id.comment %><br>
                <a class="text-muted" href="<%- App.Utils.phoneify(item.to_pretty) %>"><%= item.to_pretty %></a>
              </div>
            <% end %>
          <% end %>
        <% end %>
        <% if !shown && !_.isEmpty(item.to_comment): %>
          <% shown = true %>
          <div class="user-card">
            <%- @unique_avatar(item.to_comment, item.to_comment.split(" ").map((name) -> name[0]).join("")) %>
            <%= item.to_comment %><br>
            <a class="text-muted" href="<%- App.Utils.phoneify(item.to_pretty) %>"><%= item.to_pretty %></a>
          </div>
        <% end %>
        <% if !shown: %>
          <div class="user-card">
            <% if item.direction isnt 'in': %>
              <%- @unique_avatar(item.to_pretty || item.to, '??') %>
            <% end %>
          <% if !_.isEmpty(item.to_pretty): %>
            <a class="inherit-color" href="<%- App.Utils.phoneify(item.to_pretty) %>"><%= item.to_pretty %></a>
            <% if item.direction is 'out': %>
            <div class="btn btn--text btn--create no-padding js-newUser" href="#" data-phone="<%= item.to_pretty %>"><%- @Icon('plus-small') %> <span><%- @T('New User') %></div>
            <% end %>
          <% else: %>
            <a class="inherit-color" href="<%- App.Utils.phoneify(item.to) %>"><%= item.to %></a>
          <% end %>
          </div>
        <% end %>
      </td>
      <!--<td style="vertical-align: middle"><%= item.queue %></td>-->
      <td>
        <% if item.state_human: %>
        <%- @Icon('status', "#{item.status_class} inline") %> <%- @T(item.state_human) %>
        <% end %>
      </td>
      <td><%= @time_duration(item.duration_waiting_time) %></td>
      <td><%= @time_duration(item.duration_talking_time) %></td>
      <td><%- @humanTime(item.created_at) %></td>
    </tr>
    <% end %>
  </tbody>
</table>
