#{param name=connections/}
<div class="ms-Grid">
  <div class="text-centered">
    <div class="ms-Grid-row">
      <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">
        <% if (connections) { %>
        <div class="ms-CommandBar">
          <div class="ms-CommandBarSearch">
            <input class="ms-CommandBarSearch-input" type="text" placeholder="Search" tabindex="1"/>
            <div class="ms-CommandBarSearch-iconWrapper ms-CommandBarSearch-iconSearchWrapper">
              <i class="ms-Icon ms-Icon--search"></i>
            </div>
            <div class="ms-CommandBarSearch-iconWrapper ms-CommandBarSearch-iconClearWrapper ms-font-s">
              <i class="ms-Icon ms-Icon--x"></i>
            </div>
          </div>
        </div>
        <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 (conn in connections) { %>
                        <li class="ms-OrgChart-listItem compose" id="line-${conn.remoteId}">
                          <div class="compose-Persona" id="${conn.firstName},${conn.lastName},${conn.email}">
                            <div class="ms-Persona">
                              <div class="button-panel">
                                <a href="#" class="menu-btn" id="${conn.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;">
                                        ${conn.firstName}${conn.lastName}
                                      </font>
                                    </font>
                                  </div>
                                  <img class="ms-Persona-image" src="${conn.avatarUrl}">
                                </div>
                                <div class="ms-Persona-details less-details">
                                  <div class="ms-Persona-primaryText">
                                    <font style="vertical-align: inherit;">
                                      <a href="${conn.profileLink}" class="ms-Link" target="_blank">
                                        ${conn.fullName}
                                      </a>
                                    </font>
                                  </div>
                                  <% if (conn.aboutMe) { %>
                                  <div class="ms-Persona-secondaryText">
                                    <font style="vertical-align: inherit;">
                                      <font style="vertical-align: inherit;">${conn.aboutMe}</font>
                                    </font>
                                  </div>
                                  <% } %>
                                </div>
                              </div>
                              <div class="button-panel add-btn" id="${conn.email}">
                                <a href="#">
                                  <i class="ms-Icon ms-Icon--plus" aria-hidden="true"></i>
                                </a>
                              </div>
                              <div class="button-panel letter-btn" id="${conn.email}">
                                <a href="#" >
                                  <i class="ms-Icon ms-Icon--mailEmpty" aria-hidden="true"></i>
                                </a>
                              </div>
                            </div>
                            <div id="user-details-${conn.remoteId}" class="content-det"></div>
                          </div>
                        </li>
                        <% } %>
                      </ul>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <% } else {%>
          &{Outlook.userinfo.noInfo}
        <% } %>
      </div>
    </div>
  </div>
</div>



