<% _.each(anns, function(ann) { %>

<table <% if (ann.id && ann.addedBy) { %>
            data-annId="<%- ann.id %>"
            data-added-by="<% print(_.escape(ann.addedBy.join(','))) %>"
        <% } else { %>
            data-added-by="<%= WEBCLIENT.USER.id %>"
        <% } %>
        class="keyValueTable
            <% if (!ann.id || (ann.permissions.canEdit && clientMapAnn)){ %> editableKeyValueTable <% } %>
            ">
    <thead>
      <% if (showNs && ann.ns) { %>
      <tr title="<%- ann.ns %>">
          <th colspan="2">
              <%- ann.ns.slice(0, 50) %>
          </th>
      </tr>
      <% } %>
      <tr class="tooltip">
          <th colspan="2">
            <% if (ann.id) { %>
                Added by: <%- ann.owner.firstName %> <%- ann.owner.lastName %>
                <% if (showParent && ann.link.parent.name){ %>
                  <br>
                  <% if (ann.parentNames) { %>
                    <%- ann.parentNames.length %> Annotations linked to:
                  <% } else { %>
                    To:
                  <% } %>
                  <%- ann.parentNames ? (ann.parentNames.length + " objects") : ann.link.parent.name %>
                <% } %>

                <span class="tooltip_html" style='display:none'>
                    <% if (ann.parentNames) { %>
                      You are
                      <% print (ann.permissions.canEdit && clientMapAnn ? 'editing' : 'viewing') %>
                      <b><%- ann.parentNames.length %></b> identical Key-Value annotations:
                    <% } %>
                    <% if (!ann.parentNames && ann.link) { %>
                        <!-- If single object show e.g. Image ID: (slice ImageI -> Image) -->
                        <b><%- ann.link.parent.class.slice(0, ann.link.parent.class.length-1) %>
                            ID:</b> <%- ann.link.parent.id %><br />
                    <% } %>
                    <b>Annotation ID<% if (ann.parentNames) { %>s<% } %>:</b> <%= ann.id %><br />
                    <% if (ann.parentNames) { %>
                        <b>Linked to:</b><br>
                        <% _.each(ann.parentNames, function(pName) { %>
                            &nbsp <%- pName %><br />
                        <% }) %>
                    <% } %>
                    <% if (ann.owner) { %>
                        <b>Owner:</b> <%- ann.owner.firstName %> <%- ann.owner.lastName %>
                    <% } %>
                    <% if (ann.link) { %>
                        <br /><b>Linked by:</b> <%- ann.link.owner.firstName %> <%- ann.link.owner.lastName %>
                        <% if (ann.link.date) { %>
                            <br /><b>On:</b> <% print(OME.formatDate(ann.link.date)) %>
                        <% } %>
                    <% } %>
                </span>
            <% } else if (objCount && objCount > 1) { %>
                Add annotations to <%- objCount %> objects
                <span class="tooltip_html" style='display:none'>
                    Identical Key-Value annotations will be added to each selected object.
                </span>
            <% } %>
          </th>
    </tr>
    <% if (showTableHead) { %>
    <tr>
        <th>Key</th>
        <th>Value</th>
    </tr>
    <% } %>

    </thead>

    <!-- Last row always has empty key & value fields -->
    <% if (ann.id) { %>
      <% _.each(ann.values, function(row) { %>
        <tr>
            <td><%- row['0'] %></td>
            <td><%- row['1'] %></td>
        </tr>
      <% }) %>
    <% } else { %>
      <tr class="placeholder">
          <td>Add Key</td>
          <td>Add Value</td>
      </tr>
    <% } %>
</table>

<% }) %>
