<div class="col-xs-12 col-md-6 col-lg-4 p-1 dropdown">
  <div class="cursor-interactive contact-list-present-{{isPresent}} dropdown-toggle" data-toggle="dropdown">
    <img class="avatar" src="{{avatar}}">
    <span class="forcewrap">{{email}}</span>
    {{#pendingContactRequest}}(pending){{/pendingContactRequest}}
  </div>
  <div class="dropdown-menu pt-0 w-100">
    <img src="{{avatar}}&s=512" class="w-100">
    <div class="my-1 mx-2">
      <h3 class="forcewrap">{{email}}</h3>
      <!-- <p> -->
      <!--   It is a long established fact that a reader will be distracted -->
      <!--   by the readable content of a page when looking at its layout. -->
      <!-- </p> -->
      <!-- <hr> -->
      <!-- <p>Rest of text.</p> -->
    </div>
    <div class="dropdown-divider"></div>
    {{#pendingContactRequest}}<button class="dropdown-item delete-contact"><i class="dropdown-marginal icon ion-help"></i>Cancel pending contact request</button>{{/pendingContactRequest}}
    {{^pendingContactRequest}}<button class="dropdown-item delete-contact"><i class="dropdown-marginal icon ion-trash-b"></i>Delete contact</button>{{/pendingContactRequest}}
  </div>
</div>
