<div class='bootstrap-wrapper ms-webpart-chrome
     wizdom-pageInfo wizdom-right-column-container
     text-center ms-webpartzone-cell' ng-if="vm.showPageContact">
    <div class='ms-webpart-chrome-title'>
        <span>
            <h2 style='text-align: justify;'
                class='ms-webpart-titletext'>
                <nobr>
                    {{ 'Contact information' | translate }}
                </nobr>
            </h2>
        </span>
    </div>
    <div class="ms-wpContentDivSpace">
        <div class='ms-WPBody wizdom-pageInfo-container'>
            <div class="wizdom-pageInfo-row" ng-if="::!vm.useDepartment">
                <div class="wizdom-pageInfo-imgColumn">
                    <div wizdom365-presence-picture
                         size="AVATAR"
                         email="vm.pageContact.wizdomUser.email"
                         accountname="vm.pageContact.wizdomUser.accountName"
                         name="vm.pageContact.wizdomUser.name"
                         url="vm.pageContact.wizdomUser.publicUrl"
                         image="vm.pageContact.wizdomUser.pictureURL"></div>
                </div>
                <div class="wizdom-pageInfo-textColumn">
                    <div class='name notranslate'>
                        <a href="{{::vm.pageContact.wizdomUser.publicUrl}}" title="{{::vm.pageContact.wizdomUser.name}}">{{::vm.pageContact.wizdomUser.name}}</a><span wizdom365-gf-profile-achievements email="{{::vm.pageContact.wizdomUser.accountName}}" name="{{::vm.pageContact.wizdomUser.name }}"></span>
                    </div>
                    <div class='email notranslate'>
                        <a ng-href='mailto:{{ ::vm.pageContact.wizdomUser.email }}'>
                            {{ ::vm.pageContact.wizdomUser.email }}
                        </a>
                    </div>
                    <div ng-repeat="prop in ::vm.pageContact.extendedProperties | orderObjectBy:'SortOrder'" ng-if="::vm.pageContact.extendedProperties!=null">
                        {{::prop.value}}
                    </div>
                </div>
            </div>            
            <div ng-if="::vm.useDepartment" class="wizdom-pageInfo-row">
                <div ng-show="::vm.pageContact.departmentImage" class="wizdom-pageInfo-imgColumn">
                    <img class="departmentImage"
                         ng-src="{{ ::vm.pageContact.departmentImage }}" />
                </div>
                <div class="wizdom-pageInfo-textColumn">
                    <div class='name notranslate'>
                        <a ng-show="::vm.pageContact.departmentUrl"
                           ng-href="{{::vm.pageContact.departmentUrl}}">
                            {{ ::vm.pageContact.departmentName }}
                        </a>
                        <span ng-hide="::vm.pageContact.departmentUrl"
                              ng-href="{{::vm.pageContact.departmentUrl}}">
                            {{ ::vm.pageContact.departmentName }}
                        </span>
                    </div>
                    <div class='email'>
                        <a ng-href='mailto:{{ ::vm.pageContact.departmentMail }}'>
                            {{ ::vm.pageContact.departmentMail }}
                        </a>
                    </div>
                </div>
            </div>
            <div class='ms-clear'></div>
        </div>
    </div>
    <style type="text/css">
        @media print {
            a[href]:after {
                content: none !important;
            }
            .wt-shadow {
                padding-top:25px !important;
            }
            .translation-panel .translation-btn {
                display: none !important;
            }
        }
    </style>
</div>
