<section class="wizdom365SearchSection" ng-repeat="user in users track by $index">
    <div class="wizdom365SearchLeftbody wizdom-phonebook-imgColumn">
        <div wizdom365-presence-picture="" size="AVATAR" accountname="user.AccountName" email="user.WorkEmail" name="user.PreferredName" image="user.Path"></div>
    </div>
    <div class="wizdom365SearchRightbody wizdom-phonebook-textColumn">

        <div class="name">
            <span wizdom365-presence-picture
                  size="SMALL"
                  type="presenceonly"
                  accountname="user.AccountName"
                  image="user.Path"
                  name="user.PreferredName" 
                  email="user.WorkEmail">
            </span>
            <a ng-href="{{user.Path}}" target="_blank" ng-bind-html="user.PreferredName | wizdom365Highlight:searchTerm">

            </a>
        </div>
        <section>
            <div class="email" ng-show="user.WorkEmail.length"><a ng-href="mailto:{{user.WorkEmail}}" ng-bind-html="user.WorkEmail | wizdom365Highlight:searchTerm"></a></div>
            <div class="department" ng-show="user.Department.length" ng-click="setSearchTerm('Department', user.Department)" ng-bind-html="user.Department | wizdom365Highlight:(searchTerm | wizdom365ReplaceSearchTerm)"></div>
            <div class="phone" ng-show="user.WorkPhone.length">
                <a ng-href="tel:{{user.WorkPhone}}">
                    <span ng-bind-html="user.WorkPhone | wizdom365Highlight:(searchTerm | wizdom365ReplaceSearchTerm)"></span>
                </a>
            </div>
            <div class="phoneAndSip" ng-show="user.MobilePhone.length || user.SipAddress.length">
                <p>
                    <a ng-show="user.MobilePhone.length" ng-href="tel:{{user.MobilePhone}}">
                        <span ng-bind-html="user.MobilePhone | wizdom365Highlight:(searchTerm | wizdom365ReplaceSearchTerm)"></span>
                    </a>
                    <a ng-if="user.MobilePhone.length && user.SipAddress.length">
                        |
                    </a>
                    <a ng-show="user.SipAddress.length" ng-href="sip:{{user.SipAddress}}">
                        {{'Call on Teams' | translate}}
                    </a>
                </p>
            </div>
            <div class="showMore" ng-click="user.showExtendedInfo = !user.showExtendedInfo">
                <span ng-show="!user.showExtendedInfo">{{'Show more' | translate}}<i class="glyphicon glyphicon-menu-down" title="{{'Show more' | translate}}"></i></span>
                <span ng-show="user.showExtendedInfo">{{'Show less' | translate}}<i class="glyphicon glyphicon-menu-up" title="{{'Show less' | translate}}"></i></span>
            </div>
            <div class="extendedInfo" ng-show="user.showExtendedInfo">
                <div ng-show="user.JobTitle">
                    {{'Job title' | translate}}:
                    <a class="jobTitle" ng-show="user.JobTitle.length" ng-click="setSearchTerm('JobTitle', user.JobTitle)" ng-bind-html="user.JobTitle | wizdom365Highlight:(searchTerm | wizdom365ReplaceSearchTerm)"></a>
                </div>
                <div ng-show="user.BaseOfficeLocation">
                    {{'Location' | translate}}:
                    <a class="location" ng-show="user.BaseOfficeLocation" ng-click="setSearchTerm('Location', user.BaseOfficeLocation)" ng-bind-html="user.BaseOfficeLocation | wizdom365Highlight:(searchTerm | wizdom365ReplaceSearchTerm)"></a>
                </div>
                <div class="responsibilities" ng-show="user.Responsibility">
                    {{'Ask me about' | translate}}: <a class="responsibility" ng-repeat="resp in user.Responsibility.split(';')" ng-click="setSearchTerm('Responsibility', resp)" ng-bind-html="(resp + ', ' | wizdom365Highlight:(searchTerm | wizdom365ReplaceSearchTerm))"></a>
                </div>
                <div class="interests" ng-show="user.Interests">
                    {{'Interests' | translate}}: <a class="interest" ng-repeat="interest in user.Interests.split(';')" ng-click="setSearchTerm('Interests', interest)" ng-bind-html="(interest  + ', ' | wizdom365Highlight:(searchTerm | wizdom365ReplaceSearchTerm))"></a>
                </div>
                <div class="birthday" ng-show="user.w365Birthday">
                    {{'Birthday' | translate}}: {{user.w365Birthday | date:'MMMM d'}}
                </div>
                <div class="hireDate" ng-show="user.w365HireDate">
                    {{'Hiredate' | translate}}: {{user.w365HireDate | date: 'longDate'}}
                </div>
            </div>
        </section>
    </div>
</section>