<div class="modal-header">
    <button type="button" class="close closebtn" data-ng-click="cancel()" aria-hidden="true">&times;</button>

    <div class="modal-body" ng-if="!dataReady">
        {{'loading...' | translate}}
    </div>

    <div class="row" ng-hide="!dataReady">
        <div wizdom365-pagetranslation></div>
        <div class="pull-left col-sm-5 hidden-xs">
            <button type="button"
                    class="btn btn-default"
                    ng-click="loadItem(backId)"
                    ng-disabled="dataReady && backId==null">
                {{'Previous' | translate}}
            </button>
            <div style="width:5px;display:inline-block;">&nbsp;</div>
            <button type="button"
                    class="btn btn-default"
                    ng-click="loadItem(forwardId)"
                    ng-disabled="dataReady && forwardId==null">
                {{'Next' | translate}}
            </button>
            <div style="width:5px;display:inline-block;">&nbsp;</div>
        </div>
        <div ng-if="!shouldNotMarkRead" class="markAsReadSection pull-right">
            <div class="shareItemDiv">
                <input class="shareLinkInput" type="text" focus-me="showShareLink" ng-show="showShareLink" ng-model="item.shareLinkUrl" readonly />
                <span ng-click="showShareLink = !showShareLink">
                    <i class="glyphicon glyphicon-share wt-icon" title="{{'Share' | translate}}"></i>
                    <span class="wt-linkText" title="{{'Share' | translate}}">{{'Share' | translate}}</span>
                </span>
            </div>
            <span class="headerLinkSpacer"></span>
            <div class="editItemDiv" ng-if="item.canEdit">
                <i class="glyphicon glyphicon-pencil wt-icon" ng-click="editNewsItem(item.id)" title="{{'Edit' | translate}}"></i>
                <span class="wt-linkText" ng-click="editNewsItem(item.id)" title="{{'Edit' | translate}}">{{'Edit' | translate}}</span>
            </div>
            <span class="headerLinkSpacer"></span>
            <div class="printItemDiv">
                <i class="glyphicon glyphicon-print wt-icon" ng-click="print()" title="{{'Print' | translate}}"></i>
                <span class="wt-linkText" ng-click="print()" title="{{'Print' | translate}}">{{'Print' | translate}}</span>
            </div>
            <span class="headerLinkSpacer"></span>
            <div class="checkboxReadUnread"
                 ng-click="markRead ? unReadStatus() : readStatus()">
                <i class="glyphicon wt-linkText wt-checkUncheck"
                   style="color:white;"
                   ng-class="{'glyphicon-check': markRead, 'glyphicon-unchecked': !markRead}"
                   title="{{(markRead ?  'Mark as unread' : 'Mark as read') | translate}}"></i>
                <span title="{{(markRead ?  'Mark as unread' : 'Mark as read') | translate}}">{{'Read' | translate}}</span>
            </div>
            <span class="headerLinkSpacer"></span>
            <div class="editItemDiv" ng-if="item.canEdit && item.isPinned">
                <i class="glyphicon glyphicon-pushpin wt-icon" ng-click="unpin()" title="{{'Unpin' | translate}}"></i>
                <span class="wt-linkText" ng-click="unpin()" title="{{'Unpin' | translate}}">{{'Unpin' | translate}}</span>
            </div>
            <div class="editItemDiv" ng-if="item.canEdit && !item.isPinned">
                <i class="glyphicon glyphicon-pushpin wt-icon" ng-click="pin()" title="{{'Pin' | translate}}"></i>
                <span class="wt-linkText" ng-click="pin()" title="{{'Pin' | translate}}">{{'Pin' | translate}}</span>
            </div>
        </div>
    </div>
</div>

<div class="modal-body" ng-if="dataReady">
    <div class="noticeboard-showitem">
        <div wizdom-include="template"></div>
    </div>
</div>

<div class="modal-footer wd-noticeboard text-left" ng-if="::(socialFeatureEnabled && ((item.metadata.allowComments == null && enableSocialOnItemByDefault) || item.metadata.allowComments))" ng-show="dataReady">
    <div data-wizdom365-comments-panel data-item="item" itemid="item.id" itemtype="item" defaultfocus="false" commentsorderby="webpartProperties.extendedProperties.commentsOrderBy" template-url="webpartProperties.extendedProperties.socialCommentsTemplate"></div>
</div>

