<form class="popover" tabindex="-1" style="width: 400px" ng-init="">
    <div class="arrow"></div>
    <h3 class="popover-title">{{'Share with a colleague' | translate}}</h3>
    <div class="popover-content">
        <div class="form-group">
            <div wizdom365-principalpicker
                 add-fn="validaUsersEmail(principal, site.sharePrincipals)"
                 principals="site.sharePrincipals"
                 mode="users"
                 allowmultiple="true"
                 class="principal-picker"></div>
        </div>
        
        <div class="form-group">
            <label for="message">{{'Add a message' | translate}}</label>
            <textarea class="form-control" rows="4" ng-model="site.shareMessage"></textarea>
        </div>
        <div class="form-group text-right">
            <button ng-click="share(site, $hide)" class="btn btn-primary" type="button">{{'Share' | translate}}</button>
        </div>
    </div>
</form>