#{param name=recipients/}
<div id="recipientForm" class="ms-Grid-row"><!-- TODO no ID, use class -->
  <div class="ms-Grid-col ms-u-sm1 ms-u-md2 ms-u-lg2"></div>
  <div class="ms-Grid-col ms-u-sm10 ms-u-md8 ms-u-lg8">
    <div class="outlook-userInfo-person for-addressee">
      <div class="ms-PersonaCard">
        <div class="ms-PersonaCard-actionDetailBox">
          <ul id="detailList" class="ms-PersonaCard-detailChat">
            <li class="ms-PersonaCard-actionDetails detail-6">
              <div class="ms-OrgChart">
                <div class="ms-OrgChart-group">
                  <ul class="ms-OrgChart-list">
                    <% for (rec in recipients) { %>
                    <!-- TODO no ID, use class -->
                    <li class="ms-OrgChart-listItem compose" id="line-${rec.remoteId}">
                      <!-- TODO no ID, use data -->
                      <div class="compose-Persona" id="${rec.firstName},${rec.lastName},${rec.email}">
                        <div class="ms-Persona">
                          <div class="button-panel">
                            <!-- TODO no ID, use data -->
                            <a href="#" class="menu-btn" id="${rec.remoteId}">
                              <i class="ms-Icon ms-Icon--chevronDown" aria-hidden="true"></i>
                            </a>
                          </div>
                          <div class="ms-Persona-compase">
                            <div class="ms-Persona-imageArea">
                              <div class="ms-Persona-initials ms-Persona-initials--darkBlue">
                                <font style="vertical-align: inherit;">
                                  <font style="vertical-align: inherit;">
                                    ${rec.firstName}${rec.lastName}
                                  </font>
                                </font>
                              </div>
                              <img class="ms-Persona-image" src="${rec.avatarUrl}">
                            </div>
                            <div class="ms-Persona-details less-details">
                              <div class="ms-Persona-primaryText">
                                <font style="vertical-align: inherit;">
                                  <a href="${rec.profileLink}" class="ms-Link" target="_blank">
                                    ${rec.fullName}
                                  </a>
                                </font>
                              </div>
                              <% if (rec.aboutMe) { %>
                              <div class="ms-Persona-secondaryText">
                                <font style="vertical-align: inherit;">
                                  <font style="vertical-align: inherit;">${rec.aboutMe}</font>
                                </font>
                              </div>
                              <% } %>
                            </div>
                          </div>
                          <div class="button-panel">
                            <a href="#" class="remove-btn" id="${rec.email}">
                              <i class="ms-Icon ms-Icon--minus" aria-hidden="true"></i>
                            </a>
                          </div>
<!--                                <div class="button-panel createMessage-btn" id="${rec.email}">-->
<!--                                  <a href="#">-->
<!--                                    <i class="ms-Icon ms-Icon&#45;&#45;plus" aria-hidden="true"></i>-->
<!--                                  </a>-->
<!--                                </div>-->
                        </div>
                        <div id="user-details-${rec.remoteId}" class="content-det"></div>
                      </div>
                    </li>
                    <% } %>
                  </ul>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>
<div id="otherConnection"></div>
