<!-- A summary of all changes -->
<section class="change-recommendation-overview" *ngIf="changes.length > 0">
    <strong> {{ 'Summary of changes' | translate }}: </strong>

    <ul>
        <li *ngFor="let change of changes">
            <a
                href=""
                (click)="scrollToChangeClicked(change, $event)"
                [class.amendment]="isAmendment(change)"
                [class.recommendation]="isChangeRecommendation(change)"
            >
                <span *ngIf="!change.isTitleChange()" class="line-number">
                    {{ 'Line' | translate }} {{ formatLineRange(change) }}
                </span>
                <span *ngIf="change.isTitleChange()">{{ 'Title' | translate }}</span>
                <span *ngIf="isChangeRecommendation(change)"> ({{ 'Change recommendation' | translate }})</span>
                <span *ngIf="isAmendment(change)"> ({{ 'Amendment' | translate }} {{ change.getIdentifier() }})</span>
                <span class="operation" *ngIf="isChangeRecommendation(change)">
                    – {{ getRecommendationTypeName(change) | translate }}
                    <!--
                        @TODO
                        <span ng-if="change.original.getType(motion.getVersion(version).text) == 3">
                          { change.other_description }
                        </span>
                    -->
                </span>
                <span class="status">
                    <ng-container *ngIf="change.isRejected()"> – <span translate>Rejected</span></ng-container>
                    <ng-container *ngIf="change.isAccepted() && isAmendment(change)">
                        – {{ change.stateName | translate }}</ng-container
                    >
                </span>
            </a>
        </li>
    </ul>

    <div *ngIf="changes.length === 0" class="no-changes">{{ 'No change recommendations yet' | translate }}</div>
</section>

<span class="text-prefix-label">{{ preamble | translate }}</span>

<!-- The actual diff view -->
<div class="motion-text-with-diffs">
    <div *ngIf="getTitleChangingObject() as changedTitle">
        <div class="diff-box diff-box-{{ changedTitle.getChangeId() }} clearfix">
            <div class="action-row" *osPerms="'motions.can_manage'">
                <button
                    mat-icon-button
                    *ngIf="isRecommendation(changedTitle)"
                    type="button"
                    [matMenuTriggerFor]="changeRecommendationMenu"
                    [matMenuTriggerData]="{ change: changedTitle }"
                >
                    <mat-icon>more_horiz</mat-icon>
                </button>
            </div>
            <div class="status-row" *ngIf="changedTitle.isRejected()">
                <i class="grey">{{ 'Rejected' | translate }}</i>
            </div>

            <div
                class="motion-text motion-text-diff"
                [class.line-numbers-none]="isLineNumberingNone()"
                [class.line-numbers-inline]="isLineNumberingInline()"
                [class.line-numbers-outside]="isLineNumberingOutside()"
                [attr.data-change-id]="changedTitle.getChangeId()"
            >
                <div class="bold">{{ 'Changed title' | translate }}:</div>
                <div [innerHTML]="getFormattedTitleDiff() | trust: 'html'"></div>
            </div>
        </div>
    </div>
    <div *ngFor="let change of getAllTextChangingObjects(); let i = index">
        <div
            class="motion-text"
            [class.line-numbers-none]="isLineNumberingNone()"
            [class.line-numbers-inline]="isLineNumberingInline()"
            [class.line-numbers-outside]="isLineNumberingOutside()"
        >
            <os-motion-detail-original-change-recommendations
                [html]="getTextBetweenChanges(getAllTextChangingObjects()[i - 1], change)"
                [changeRecommendations]="[]"
                (createChangeRecommendation)="onCreateChangeRecommendation($event)"
            ></os-motion-detail-original-change-recommendations>
        </div>

        <div
            class="diff-box diff-box-{{ change.getChangeId() }} clearfix"
            [class.collides]="hasCollissions(change, getAllTextChangingObjects())"
        >
            <div class="collission-hint" *ngIf="hasCollissions(change, getAllTextChangingObjects())">
                <mat-icon matTooltip="{{ 'This change collides with another one.' | translate }}">warning</mat-icon>
            </div>
            <div class="action-row" *osPerms="'motions.can_manage'">
                <button
                    mat-icon-button
                    *ngIf="isRecommendation(change)"
                    type="button"
                    [matMenuTriggerFor]="changeRecommendationMenu"
                    [matMenuTriggerData]="{ change: change }"
                >
                    <mat-icon>more_horiz</mat-icon>
                </button>

                <!--
                    <a ng-if="change.type == 'amendment'" ui-sref="motions.motion.detail({id: change.original.id})"
                       uib-tooltip="Open amendment"
                       class="btn btn-default btn-sm pull-right btn-amend-info">
                        <i class="fa fa-info"></i>
                        {{ change.original.identifier }}
                    </a>
                -->
            </div>
            <div class="status-row" *ngIf="change.isRejected()">
                <i class="grey">{{ 'Rejected' | translate }}</i>
            </div>

            <div
                class="motion-text motion-text-diff"
                [class.line-numbers-none]="isLineNumberingNone()"
                [class.line-numbers-inline]="isLineNumberingInline()"
                [class.line-numbers-outside]="isLineNumberingOutside()"
                [attr.data-change-id]="change.getChangeId()"
                [innerHTML]="getDiff(change) | trust: 'html'"
            ></div>
        </div>
    </div>

    <div
        class="motion-text"
        [class.line-numbers-none]="isLineNumberingNone()"
        [class.line-numbers-inline]="isLineNumberingInline()"
        [class.line-numbers-outside]="isLineNumberingOutside()"
    >
        <os-motion-detail-original-change-recommendations
            [html]="getTextRemainderAfterLastChange()"
            [changeRecommendations]="[]"
            (createChangeRecommendation)="onCreateChangeRecommendation($event)"
        ></os-motion-detail-original-change-recommendations>
    </div>
</div>

<mat-menu #changeRecommendationMenu="matMenu">
    <ng-template matMenuContent let-change="change">
        <button
            type="button"
            mat-menu-item
            [disabled]="hasCollissions(change, changes)"
            (click)="setAcceptanceValue(change, 'accepted')"
        >
            <mat-icon>thumb_up</mat-icon>
            <span translate>Accept</span>
            <mat-icon class="active-indicator">{{ change.isAccepted() ? 'done' : '' }}</mat-icon>
        </button>
        <button
            type="button"
            mat-menu-item
            [disabled]="hasCollissions(change, changes)"
            (click)="setAcceptanceValue(change, 'rejected')"
        >
            <mat-icon>thumb_down</mat-icon>
            <span translate>Reject</span>
            <mat-icon class="active-indicator">{{ change.isRejected() ? 'done' : '' }}</mat-icon>
        </button>
        <button type="button" mat-menu-item (click)="setInternal(change, !change.internal)">
            <mat-icon>{{ change.internal ? 'check_box_outline_blank' : 'check_box' }}</mat-icon>
            <span translate>Public</span>
        </button>
        <button type="button" mat-menu-item (click)="deleteChangeRecommendation(change, $event)">
            <mat-icon>delete</mat-icon>
            <span translate>Delete</span>
        </button>
        <button
            type="button"
            mat-menu-item
            (click)="editChangeRecommendation(change, $event)"
            *ngIf="!change.isTitleChange()"
        >
            <mat-icon>edit</mat-icon>
            <span translate>Edit</span>
        </button>
        <button
            type="button"
            mat-menu-item
            (click)="editTitleChangeRecommendation(change, $event)"
            *ngIf="change.isTitleChange()"
        >
            <mat-icon>edit</mat-icon>
            <span translate>Edit</span>
        </button>
    </ng-template>
</mat-menu>
