<div ng-controller="Wizdom365SynchronizationController">
    <h2 class="remove-top-margin" style="padding: 15px;">
        {{'Sync' | translate}}
    </h2>
    <br />
    <div style="padding-right:10px; float:left; width:30%" wizdom365-principalpicker principals="principalMembers" mode="groups" allowmultiple="false" class="principal-picker"></div>
    <span class="pull-left">
        <button class="btn btn-primary wide-config-btn"
                ng-disabled="synchronizing == true"
                ng-click="synchronize()">
            {{synchronizing ? 'Synchronizing' : 'Synchronize now' | filter}}
        </button>
    </span>
    <wizdom365-spinner style="position: absolute; top: 4%; left: 50%;" loading="synchronizing"></wizdom365-spinner>
</div>