<div ng-if="viewChangeRecommendations.mode == 'diff'">

    <!-- The actual diff view -->
    <div class="motion-text-with-diffs line-numbers-{{ lineNumberMode }}">
        <div ng-repeat="change in (changes = (change_recommendations | filter:{motion_version_id:version}:true | orderBy: 'line_from')) ">
            <div class="motion-text original-text line-numbers-{{ lineNumberMode }}"
                 ng-bind-html="motion.getTextBetweenChangeRecommendations(version, changes[$index - 1], change, highlight) | trusted"></div>

            <div ng-class="motion.isAllowed('can_manage') ? 'diff-box' : 'diff-box-transparent'"
                class="diff-box-{{ change.id }} clearfix">
                <div class="action-row" ng-if="motion.isAllowed('can_manage')">
                    <div class="btn-group" data-toggle="buttons">
                        <label class="btn btn-sm btn-default" ng-class="{active: !change.rejected}"
                               title="{{ 'Not rejected' | translate }}" ng-click="change.rejected = false; change.saveStatus();">
                            <input type="radio" name="changeRecommendationRejected[{{ change.id }}]" value="0"
                               ng-change="change.saveStatus()" ng-model="change.rejected" ng-checked="change.rejected == false">
                            <i class="fa fa-thumbs-up"></i>
                        </label>
                        <label class="btn btn-sm btn-default" ng-class="{active: change.rejected}"
                               title="{{ 'Rejected' | translate }}" ng-click="change.rejected = true; change.saveStatus();">
                            <input type="radio" name="changeRecommendationRejected[{{ change.id }}]" value="1"
                               ng-change="change.saveStatus()" ng-model="change.rejected" ng-checked="change.rejected == true">
                            <i class="fa fa-thumbs-down"></i>
                        </label>
                    </div>

                    <button class="btn btn-default btn-sm pull-right btn-delete"
                            ng-bootbox-confirm="{{ 'Are you sure you want to delete this change recommendation?' | translate }}"
                            ng-bootbox-confirm-action="viewChangeRecommendations.delete(change.id)"
                            title="{{ 'Delete' | translate }}">
                        <i class="fa fa-trash"></i>
                    </button>

                    <button class="btn btn-default btn-sm pull-right btn-edit" ng-click="createChangeRecommendation.editDialog(change)"
                            title="{{ 'Edit' | translate }}">
                        <i class="fa fa-pencil"></i>
                    </button>
                </div>
                <div class="status-row" ng-if="!motion.isAllowed('can_manage') && change.rejected">
                    <translate>Rejected</translate>
                </div>

                <div class="motion-text motion-text-diff line-numbers-{{ lineNumberMode }}"
                     ng-bind-html="change.getDiff(motion, version, highlight) | trusted"></div>
            </div>
        </div>

        <div class="motion-text original-text line-numbers-{{ lineNumberMode }}"
             ng-bind-html="motion.getTextRemainderAfterLastChangeRecommendation(version, changes, highlight) | trusted"></div>
    </div>
</div>
