<div class="bootstrap-wrapper ms-webpart-chrome wt-markAsRead" ng-show="canMarkAsRead || successMarked">
    <div class="ms-webpart-chrome-title">
        <div class="ms-webpart-titletext"><!--{{ 'Page status' | translate }}--></div>
    </div>
    <div class="ms-wpContentDivSpace mark-as-read-box">
        <h3>{{"Mandatory read" | translate }}</h3>
        <p>{{"You are required to confirm you have read and understood this document." | translate }}</p>
        <div class="ms-WPBody">
            <div class="mark-as-feedback" ng-hide="successMarked">
                <div class="checkbox wt-markAsReadCheckboxDiv" ng-show="canMarkAsRead">
                    <label>
                        <input type="checkbox" value="" class="wt-markAsReadCheckbox" ng-click="markAsRead()">
                        {{"I confirm I have read and I understand this document" | translate}}
                    </label>
                </div>
            </div>
            <div class="tempMessage" ng-show="successMarked">{{"You have marked the page as read" | translate}}</div>
        </div>
    </div>
</div>