<os-head-bar
    [hasMainButton]="perms.isAllowed('can_create_amendments', motion)"
    mainActionTooltip="New amendment"
    prevUrl="../.."
    [nav]="false"
    [editMode]="editMotion"
    [isSaveButtonEnabled]="contentForm.valid"
    (mainEvent)="createAmendment()"
    (cancelEditEvent)="setEditMode(false)"
    (saveEvent)="saveMotion()"
>
    <!-- Title -->
    <div class="title-slot">
        <h2 *ngIf="motion && !newMotion">
            <span translate>Motion</span>
            <!-- Whitespace between "Motion" and identifier -->
            <span>&nbsp;</span> <span *ngIf="!editMotion">{{ motion.identifier }}</span>
            <span *ngIf="editMotion">{{ contentForm.get('identifier').value }}</span>
        </h2>
        <h2 *ngIf="newMotion && !amendmentEdit" translate>New motion</h2>
        <h2 *ngIf="amendmentEdit" translate>New amendment</h2>
    </div>

    <!-- Back and forth buttons -->
    <div *ngIf="!editMotion && !vp.isMobile" class="extra-controls-slot">
        <div *ngIf="previousMotion">
            <button mat-button (click)="navigateToMotion(previousMotion)">
                <mat-icon>chevron_left</mat-icon>
                <span>{{ previousMotion.identifier }}</span>
            </button>
        </div>
        <div *ngIf="nextMotion">
            <button mat-button (click)="navigateToMotion(nextMotion)">
                <span>{{ nextMotion.identifier }}</span>
                <mat-icon>chevron_right</mat-icon>
            </button>
        </div>
    </div>

    <!-- Menu -->
    <div class="menu-slot">
        <button type="button" mat-icon-button [matMenuTriggerFor]="motionExtraMenu">
            <mat-icon>more_vert</mat-icon>
        </button>
    </div>

    <mat-menu #motionExtraMenu="matMenu">
        <div *ngIf="motion">
            <div *ngIf="vp.isMobile">
                <button mat-menu-item (click)="navigateToMotion(previousMotion)" *ngIf="previousMotion">
                    <mat-icon>chevron_left</mat-icon>
                    <span>{{ 'Motion' | translate }} {{ previousMotion.identifier }}</span>
                </button>
                <button mat-menu-item (click)="navigateToMotion(nextMotion)" *ngIf="nextMotion">
                    <mat-icon>chevron_right</mat-icon>
                    <span>{{ 'Motion' | translate }} {{ nextMotion.identifier }}</span>
                </button>
                <mat-divider *ngIf="previousMotion || nextMotion"></mat-divider>
            </div>
            <!-- List of speakers -->
            <os-speaker-button [object]="motion" [menuItem]="true"></os-speaker-button>
            <!-- PDF -->
            <button mat-menu-item (click)="onDownloadPdf()">
                <mat-icon>picture_as_pdf</mat-icon>
                <span translate>PDF</span>
            </button>
            <mat-divider></mat-divider>
            <!-- Project -->
            <os-projector-button
                [object]="motion"
                [menuItem]="true"
                *osPerms="'core.can_manage_projector'"
            ></os-projector-button>
            <!-- Add/remove to/from agenda -->
            <div *osPerms="'agenda.can_manage'">
                <button mat-menu-item (click)="addToAgenda()" *ngIf="motion && !motion.item">
                    <mat-icon>add</mat-icon>
                    <span translate>Add to agenda</span>
                </button>
                <button mat-menu-item (click)="removeFromAgenda()" *ngIf="motion && motion.item">
                    <mat-icon>remove</mat-icon>
                    <span translate>Remove from agenda</span>
                </button>
            </div>
            <button
                mat-menu-item
                *osPerms="'core.can_see_history'"
                [routerLink]="['/history']"
                [queryParams]="{ element: motion.elementId }"
            >
                <mat-icon>history</mat-icon>
                <span translate>
                    History
                </span>
            </button>
            <mat-divider></mat-divider>
            <!-- Edit-->
            <button mat-menu-item (click)="setEditMode(true)" *ngIf="perms.isAllowed('update', motion)">
                <mat-icon>edit</mat-icon>
                <span translate>Edit</span>
            </button>
            <!-- Delete -->
            <button
                mat-menu-item
                class="red-warning-text"
                (click)="deleteMotionButton()"
                *ngIf="perms.isAllowed('manage')"
            >
                <mat-icon>delete</mat-icon>
                <span translate>Delete</span>
            </button>
        </div>
    </mat-menu>
</os-head-bar>

<div class="content-container" (touchstart)="swipe($event, 'start')" (touchend)="swipe($event, 'end')">
    <!-- Title -->
    <div class="title" *ngIf="motion && !editMotion">
        <div class="title-line">
            <h1 class="motion-title">
                <span *ngIf="titleCanBeChanged()">
                    <span
                        class="title-change-indicator"
                        *ngIf="getTitleChangingObject()"
                        (click)="gotoChangeRecommendation(getTitleChangingObject())"
                    ></span>
                    <span
                        class="change-title"
                        *osPerms="'motions.can_manage'; and: !getTitleChangingObject()"
                        (click)="createTitleChangeRecommendation()"
                    ></span>
                </span>

                {{ getTitleWithChanges() }}
            </h1>
            <button mat-icon-button color="primary" (click)="toggleFavorite()">
                <mat-icon>{{ motion.star ? 'star' : 'star_border' }}</mat-icon>
            </button>
        </div>

        <!-- Sequential number -->
        <span class="main-nav-color title-font">
            <span *ngIf="showSequential"> <span translate>Sequential number</span>&nbsp;{{ motion.id }} </span>
            <span *ngIf="showSequential && motion.parent_id">&#xb7;&nbsp;</span>
            <span *ngIf="motion.parent_id">
                <span>
                    <span translate>Amendment to</span>&nbsp;<a
                        [routerLink]="motion.parent.getDetailStateURL()"
                        [state]="{ back: 'true' }"
                    >
                        {{ motion.parent.identifier || motion.parent.title }}
                    </a>
                </span>
            </span>
        </span>
    </div>

    <ng-container *ngIf="vp.isMobile; then mobileView; else desktopView"></ng-container>
</div>

<ng-template #mobileView>
    <div *ngIf="motion" class="mobile-view">
        <!-- Meta info -->
        <div><ng-container *ngTemplateOutlet="metaInfoTemplate"></ng-container></div>

        <!-- Content -->
        <mat-card [ngClass]="editMotion ? 'os-form-card-mobile' : 'os-card'">
            <ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
        </mat-card>

        <!-- Comments -->
        <os-motion-comments *ngIf="!editMotion" [motion]="motion"></os-motion-comments>

        <!-- Personal note -->
        <os-personal-note *ngIf="!editMotion && !operator.isAnonymous" [motion]="motion"></os-personal-note>
    </div>
</ng-template>

<ng-template #desktopView>
    <div class="desktop-view" *ngIf="motion">
        <div class="desktop-left">
            <!-- Meta Info -->
            <div><ng-container *ngTemplateOutlet="metaInfoTemplate"></ng-container></div>

            <os-motion-comments *ngIf="!editMotion" [motion]="motion"></os-motion-comments>
            <os-personal-note *ngIf="!editMotion && !operator.isAnonymous" [motion]="motion"></os-personal-note>
        </div>
        <div class="desktop-right">
            <!-- Content -->
            <mat-card [ngClass]="editMotion ? 'os-form-card' : 'os-card'">
                <ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
            </mat-card>
        </div>
    </div>
</ng-template>

<ng-template #metaInfoTemplate>
    <div>
        <!-- Submitters -->
        <div *ngIf="motion.submitters || newMotion">
            <div *ngIf="!editMotion"><os-manage-submitters [motion]="motion"></os-manage-submitters></div>
        </div>

        <!-- do Support -->
        <div *ngIf="minSupporters && !editMotion">
            <h4 *ngIf="perms.isAllowed('support', motion) || motion.hasSupporters()" translate>Supporters</h4>

            <!-- support button -->
            <button
                type="button"
                mat-stroked-button
                color="primary"
                (click)="support()"
                *ngIf="perms.isAllowed('support', motion)"
            >
                <mat-icon>thumb_up</mat-icon>
                {{ 'Support' | translate }}
            </button>

            <!-- unsupport button -->
            <button
                type="button"
                *ngIf="perms.isAllowed('unsupport', motion)"
                (click)="unsupport()"
                mat-stroked-button
                color="primary"
            >
                <mat-icon>thumb_down</mat-icon>
                {{ 'Unsupport' | translate }}
            </button>
            <!-- show supporters (TODO: open in dialog) -->
            <button type="button" *ngIf="motion.hasSupporters()" (click)="openSupportersDialog()" mat-button>
                {{ motion.supporters.length }} {{ 'supporters' | translate }}
            </button>
            <p *ngIf="showSupporters" class="supporters">
                <span *ngFor="let supporter of motion.supporters; let last = last">
                    {{ supporter.full_name }}<span *ngIf="!last">, </span>
                </span>
            </p>
        </div>

        <!-- Set State -->
        <div *ngIf="!editMotion">
            <os-extension-field
                title="{{ 'State' | translate }}"
                [canBeEdited]="perms.isAllowed('change_state', motion)"
                [hasExtension]="motion.state && motion.state.show_state_extension_field"
                [chipValue]="stateLabel"
                [inputValue]="newStateExtension"
                [classes]="motion.stateCssColor"
                extensionLabel="{{ 'Extension' | translate }}"
                (success)="setStateExtension($event)"
            >
                <span class="trigger-menu" *ngIf="motion.state">
                    <button *ngFor="let state of motion.state.next_states" mat-menu-item (click)="setState(state.id)">
                        {{ state.name | translate }} <span *ngIf="state.show_state_extension_field">&nbsp;...</span>
                    </button>
                    <div>
                        <mat-divider *ngIf="motion.state.next_states.length > 0"></mat-divider>
                        <button
                            *ngFor="let state of motion.state.previous_states"
                            mat-menu-item
                            (click)="setState(state.id)"
                        >
                            <mat-icon>arrow_back</mat-icon> {{ state.name | translate }}
                            <span *ngIf="state.show_state_extension_field">&nbsp;...</span>
                        </button>
                        <button mat-menu-item (click)="setState(null)">
                            <mat-icon>replay</mat-icon> {{ 'Reset state' | translate }}
                        </button>
                    </div>
                </span>
            </os-extension-field>
        </div>

        <!-- Recommendation -->
        <div
            *ngIf="
                (perms.isAllowed('change_metadata') || motion.recommendation) &&
                recommender &&
                motion.possibleRecommendations.length &&
                !editMotion
            "
        >
            <os-extension-field
                title="{{ recommender }}"
                [inputValue]="recommendationStateExtension"
                [canBeEdited]="perms.isAllowed('change_metadata', motion)"
                [chipValue]="recommendationLabel"
                [hasExtension]="motion.recommendation && motion.recommendation.show_recommendation_extension_field"
                extensionLabel="{{ 'Extension' | translate }}"
                [searchList]="motionObserver"
                searchListLabel="{{ 'Motions' | translate }}"
                listValuePrefix="motion:"
                (success)="setRecommendationExtension($event)"
            >
                <span class="trigger-menu">
                    <button
                        *ngFor="let recommendation of motion.possibleRecommendations"
                        mat-menu-item
                        (click)="setRecommendation(recommendation.id)"
                    >
                        {{ recommendation.recommendation_label | translate }}
                        <span *ngIf="recommendation.show_recommendation_extension_field">&nbsp;...</span>
                    </button>
                    <mat-divider></mat-divider>
                    <button mat-menu-item (click)="setRecommendation(null)">
                        <mat-icon>replay</mat-icon> {{ 'Reset recommendation' | translate }}
                    </button>
                </span>
            </os-extension-field>

            <button
                mat-stroked-button
                *ngIf="canFollowRecommendation()"
                (click)="onFollowRecButton()"
                class="spacer-top-10"
            >
                <span translate>Follow recommendation</span>
            </button>
        </div>

        <!-- recommendation referencing motions -->
        <div *ngIf="!editMotion && recommendationReferencingMotions.length > 0 && showReferringMotions">
            <h4 translate>Referring motions</h4>
            <span *ngFor="let motion of recommendationReferencingMotions; let last = last">
                <a [routerLink]="motion.getDetailStateURL()" class="nowrap">{{ motion.identifierOrTitle }}</a>
                <span *ngIf="!last"> · </span>
            </span>
        </div>

        <!-- Category -->
        <!-- Disabled during "new motion" since changing has no effect -->
        <div *ngIf="!editMotion && categoryObserver.value.length">
            <h4 *ngIf="perms.isAllowed('change_metadata', motion) || motion.category" translate>Category</h4>
            <mat-menu #categoryMenu="matMenu">
                <button
                    mat-menu-item
                    *ngFor="let category of categoryObserver.value"
                    (click)="setCategory(category.id)"
                >
                    <mat-icon *ngIf="motion.category_id === category.id">check</mat-icon>
                    {{ category.prefixedNameWithParents }}
                </button>
            </mat-menu>
            <mat-basic-chip
                *ngIf="perms.isAllowed('change_metadata', motion)"
                [matMenuTriggerFor]="categoryMenu"
                class="grey multi-line-chip"
                disableRipple
            >
                <div *ngIf="motion.category">
                    <div *ngIf="motion.category.parent">
                        {{ motion.category.parent }}
                    </div>
                    <span *ngIf="motion.category.parent">{{ 'Subcategory' | translate }}:</span>
                    {{ motion.category }}
                </div>

                <span *ngIf="!motion.category">-</span>
            </mat-basic-chip>
            <mat-basic-chip
                *ngIf="!perms.isAllowed('change_metadata', motion) && motion.category"
                class="grey"
                disableRipple
            >
                <div *ngIf="motion.category">
                    <div *ngIf="motion.category.parent">
                        {{ motion.category.parent }}
                    </div>
                    <span *ngIf="motion.category.parent">{{ 'Subcategory' | translate }}:</span>
                    {{ motion.category }}
                </div>
            </mat-basic-chip>
        </div>

        <!-- Tags -->
        <!-- Disabled during "new motion" since changing has no effect -->
        <div *ngIf="!editMotion && tagObserver.value.length > 0">
            <h4 *ngIf="perms.isAllowed('change_metadata', motion) || motion.hasTags()" translate>Tags</h4>

            <!-- For privileged users -->
            <div *ngIf="perms.isAllowed('change_metadata', motion)">
                <!-- Selection menu -->
                <mat-menu #tagMenu="matMenu">
                    <button mat-menu-item *ngFor="let tag of tagObserver.value" (click)="setTag($event, tag.id)">
                        <mat-icon *ngIf="motion.tags.includes(tag)">check</mat-icon>
                        {{ tag }}
                    </button>
                </mat-menu>

                <!-- Make the whole container a trigger to prevent unexpected menu behavior -->
                <div [matMenuTriggerFor]="tagMenu">
                    <!-- No selected tags -->
                    <mat-basic-chip *ngIf="!motion.hasTags()" class="grey" disabled disableRipple>
                        {{ '–' }}
                    </mat-basic-chip>

                    <!-- Display a chip list of tags -->
                    <mat-chip-list class="mat-chip-list-stacked">
                        <mat-basic-chip *ngFor="let tag of motion.tags" class="grey" disabled disableRipple>
                            {{ tag }}
                        </mat-basic-chip>
                    </mat-chip-list>
                </div>
            </div>

            <!-- For non privileged users -->
            <div *ngIf="!perms.isAllowed('change_metadata', motion)">
                <mat-chip-list class="mat-chip-list-stacked">
                    <mat-basic-chip *ngFor="let tag of motion.tags" class="grey" disableRipple>
                        {{ tag }}
                    </mat-basic-chip>
                </mat-chip-list>
            </div>
        </div>

        <!-- Block -->
        <div *ngIf="!editMotion && blockObserver.value.length > 0">
            <h4 *ngIf="perms.isAllowed('change_metadata', motion) || motion.motion_block" translate>Motion block</h4>
            <mat-menu #blockMenu="matMenu">
                <button mat-menu-item *ngFor="let block of blockObserver.value" (click)="setBlock(block.id)">
                    <mat-icon *ngIf="motion.motion_block_id === block.id">check</mat-icon>
                    {{ block }}
                </button>
            </mat-menu>
            <mat-basic-chip
                *ngIf="perms.isAllowed('change_metadata', motion)"
                [matMenuTriggerFor]="blockMenu"
                class="grey"
                disableRipple
            >
                {{ motion.motion_block || '–' }}
            </mat-basic-chip>
            <mat-basic-chip
                *ngIf="!perms.isAllowed('change_metadata', motion) && motion.motion_block"
                class="grey"
                disableRipple
            >
                {{ motion.motion_block }}
            </mat-basic-chip>
        </div>

        <!-- Origin - display only -->
        <div *ngIf="!editMotion && motion.origin">
            <h4 translate>Origin</h4>
            {{ motion.origin }}
        </div>

        <!-- Ammendments -->
        <div *ngIf="!editMotion && amendments && amendments.length > 0">
            <h4 translate>Amendments</h4>
            <a [routerLink]="['/motions/amendments', motion.id]" [state]="{ back: 'true' }">
                {{ amendments.length }}
                <span *ngIf="amendments.length === 1" translate>Amendment</span>
                <span *ngIf="amendments.length > 1" translate>Amendments</span>
            </a>
        </div>

        <!-- motion polls -->
        <div *ngIf="!editMotion" class="spacer-top-20 spacer-bottom-20">
            <os-motion-poll *ngFor="let poll of motion.motion.polls; let i = index" [rawPoll]="poll" [pollIndex]="i">
            </os-motion-poll>
            <div class="create-poll-button" *ngIf="perms.isAllowed('createpoll', motion)">
                <button mat-button (click)="createPoll()">
                    <mat-icon class="main-nav-color">poll</mat-icon>
                    <span translate>New vote</span>
                </button>
            </div>
        </div>
    </div>
</ng-template>

<ng-template #contentTemplate>
    <form class="motion-content" [formGroup]="contentForm" (keydown)="onKeyDown($event)">
        <!-- Toolbar with text controls and buttonf for managing the (modified) final version-->
        <div class="motion-text-toolbar-wrapper" *ngIf="!editMotion && !motion.isStatuteAmendment()">
            <!-- Line Number and Diff buttons -->
            <div class="motion-text-controls">
                <mat-form-field class="motion-goto-line" *ngIf="highlightedLineOpened">
                    <input
                        type="number"
                        min="1"
                        matInput
                        placeholder="{{ 'Go to line' | translate }}"
                        osAutofocus
                        [(ngModel)]="highlightedLineTyping"
                        [ngModelOptions]="{ standalone: true }"
                        [errorStateMatcher]="highlightedLineMatcher"
                    />
                    <mat-error *ngIf="highlightedLineTyping > 10" translate>Invalid line number</mat-error>
                    <button
                        type="submit"
                        mat-button
                        matSuffix
                        mat-icon-button
                        aria-label="Go to line"
                        *ngIf="highlightedLineTyping"
                        (click)="gotoHighlightedLine(highlightedLineTyping); highlightedLineTyping = ''"
                    >
                        <mat-icon>redo</mat-icon>
                    </button>
                </mat-form-field>
                <button mat-icon-button (click)="highlightedLineOpened = false" *ngIf="highlightedLineOpened">
                    <mat-icon>cancel</mat-icon>
                </button>

                <button type="button" mat-button [matMenuTriggerFor]="lineNumberingMenu">
                    <mat-icon>format_list_numbered</mat-icon>
                    &nbsp;<span translate>Line numbering</span>
                    <span *ngIf="lnMode === LineNumberingMode.None"> &nbsp;(<span translate>none</span>) </span>
                </button>
                <button
                    type="button"
                    mat-button
                    [matMenuTriggerFor]="changeRecoMenu"
                    *ngIf="
                        motion &&
                        !motion.isParagraphBasedAmendment() &&
                        allChangingObjects &&
                        allChangingObjects.length > 0
                    "
                >
                    <mat-icon>rate_review</mat-icon>
                    &nbsp;<span>{{ verboseChangeRecoMode[crMode] | translate }}</span>
                </button>
            </div>

            <!-- Final edit buttons -->
            <div *ngIf="isRecoMode(ChangeRecoMode.ModifiedFinal) || isRecoMode(ChangeRecoMode.Final)">
                <!-- create final version -->
                <button
                    type="button"
                    mat-icon-button
                    matTooltip="{{ 'Create final print template' | translate }}"
                    *osPerms="'motions.can_manage'; and: isRecoMode(ChangeRecoMode.Final)"
                    (click)="createModifiedFinalVersion()"
                >
                    <mat-icon>file_copy</mat-icon>
                </button>
                <!-- edit final version -->
                <button
                    type="button"
                    mat-icon-button
                    *ngIf="isRecoMode(ChangeRecoMode.ModifiedFinal) && !isFinalEdit"
                    (click)="editModifiedFinal()"
                >
                    <mat-icon>edit</mat-icon>
                </button>
                <!-- save final version -->
                <button
                    type="button"
                    *ngIf="isRecoMode(ChangeRecoMode.ModifiedFinal) && isFinalEdit"
                    mat-icon-button
                    [disabled]="!finalVersionEdited"
                    (click)="onSubmitFinalVersion()"
                >
                    <mat-icon>save</mat-icon>
                </button>
                <!-- cancel final version edit -->
                <button
                    type="button"
                    *ngIf="isRecoMode(ChangeRecoMode.ModifiedFinal) && isFinalEdit"
                    mat-icon-button
                    (click)="cancelFinalVersionEdit()"
                >
                    <mat-icon>close</mat-icon>
                </button>
                <!-- delete final version edit -->
                <button
                    type="button"
                    class="red-warning-text"
                    mat-icon-button
                    matTooltip="{{ 'Delete final print template' | translate }}"
                    *ngIf="isRecoMode(ChangeRecoMode.ModifiedFinal) && !isFinalEdit"
                    (click)="deleteModifiedFinalVersion()"
                >
                    <mat-icon>delete</mat-icon>
                </button>
            </div>
        </div>

        <!-- Selecting statute paragraphs for amendment -->
        <div class="statute-amendment-selector" *ngIf="newMotion && statuteParagraphs.length > 0 && statutesEnabled">
            <mat-checkbox formControlName="statute_amendment" (change)="onStatuteAmendmentChange($event)">
                {{ 'Statute amendment' | translate }}
            </mat-checkbox>

            <mat-form-field *ngIf="contentForm.value.statute_amendment">
                <mat-select
                    [placeholder]="'Statute paragraph' | translate"
                    formControlName="statute_paragraph_id"
                    (valueChange)="onStatuteParagraphChange($event)"
                >
                    <mat-option *ngFor="let paragraph of statuteParagraphs" [value]="paragraph.id">
                        {{ paragraph.title }}
                    </mat-option>
                </mat-select>
            </mat-form-field>
        </div>

        <!-- Submitter -->
        <div *ngIf="newMotion" class="content-field">
            <div *ngIf="perms.isAllowed('change_metadata', motion)">
                <os-search-value-selector
                    ngDefaultControl
                    [formControl]="contentForm.get('submitters_id')"
                    [multiple]="true"
                    listname="{{ 'Submitters' | translate }}"
                    [inputListValues]="submitterObserver"
                ></os-search-value-selector>
            </div>
        </div>

        <div class="form-id-title">
            <!-- Identifier -->
            <div
                *ngIf="editMotion && !newMotion && perms.isAllowed('change_metadata', motion)"
                class="content-field form-identifier"
            >
                <mat-form-field *ngIf="editMotion">
                    <input
                        matInput
                        autofocus
                        placeholder="{{ 'Identifier' | translate }}"
                        formControlName="identifier"
                    />
                </mat-form-field>
            </div>

            <!-- Title -->
            <div *ngIf="editMotion" class="content-field form-title">
                <mat-form-field *ngIf="editMotion">
                    <input matInput placeholder="{{ 'Title' | translate }}" formControlName="title" required />
                    <mat-error>{{ 'The title is required' | translate }}</mat-error>
                </mat-form-field>
            </div>
        </div>

        <!-- Text (hide preamble, if diff mode. The preample is included in the motion-detail-diff component) -->
        <span *ngIf="!isRecoMode(ChangeRecoMode.Diff)" class="text-prefix-label">{{ preamble | translate }}</span>

        <!-- Regular motions or traditional amendments -->
        <ng-container *ngIf="!editMotion && !motion.isStatuteAmendment() && !motion.isParagraphBasedAmendment()">
            <div
                *ngIf="!isRecoMode(ChangeRecoMode.Diff) && !isFinalEdit"
                class="motion-text"
                [class.line-numbers-none]="isLineNumberingNone()"
                [class.line-numbers-inline]="isLineNumberingInline()"
                [class.line-numbers-outside]="isLineNumberingOutside()"
            >
                <os-motion-detail-original-change-recommendations
                    *ngIf="isLineNumberingOutside() && isRecoMode(ChangeRecoMode.Original)"
                    [html]="getFormattedTextPlain()"
                    [changeRecommendations]="changeRecommendations"
                    (createChangeRecommendation)="createChangeRecommendation($event)"
                    (gotoChangeRecommendation)="gotoChangeRecommendation($event)"
                ></os-motion-detail-original-change-recommendations>
                <div
                    *ngIf="!isLineNumberingOutside() || !isRecoMode(ChangeRecoMode.Original)"
                    [innerHTML]="getFormattedTextPlain() | trust: 'html'"
                ></div>
            </div>
            <os-motion-detail-diff
                *ngIf="isRecoMode(ChangeRecoMode.Diff)"
                [motion]="motion"
                [changes]="getChangesForDiffMode()"
                [scrollToChange]="scrollToChange"
                [highlightedLine]="highlightedLine"
                [lineNumberingMode]="lnMode"
                (createChangeRecommendation)="createChangeRecommendation($event)"
            ></os-motion-detail-diff>

            <div *ngIf="isFinalEdit">
                <editor
                    [hidden]="!isFinalEdit"
                    formControlName="modified_final_version"
                    [init]="tinyMceSettings"
                    required
                    (onChange)="detectChanges()"
                ></editor>
                <div
                    *ngIf="
                        contentForm.get('modified_final_version').invalid &&
                        (contentForm.get('modified_final_version').dirty ||
                            contentForm.get('modified_final_version').touched)
                    "
                    class="red-warning-text"
                    translate
                >
                    This field is required.
                </div>
            </div>
        </ng-container>

        <!-- formatted statute amendment -->
        <div
            class="motion-text line-numbers-none"
            *ngIf="!editMotion && motion.isStatuteAmendment()"
            [innerHTML]="getFormattedStatuteAmendment() | trust: 'html'"
        ></div>

        <!-- The HTML Editor for motions and traditional amendments -->
        <ng-container *ngIf="motion && editMotion && !motion.isParagraphBasedAmendment()">
            <editor formControlName="text" [init]="tinyMceSettings" (onChange)="detectChanges()" required></editor>
            <div
                *ngIf="
                    contentForm.get('text').invalid &&
                    (contentForm.get('text').dirty || contentForm.get('text').touched)
                "
                class="red-warning-text"
                translate
            >
                This field is required.
            </div>
        </ng-container>

        <!-- The HTML Editor for paragraph-based amendments -->
        <ng-container *ngIf="motion && editMotion && motion.isParagraphBasedAmendment()">
            <section *ngFor="let paragraph of contentForm.value.selected_paragraphs">
                <h3>
                    <span *ngIf="paragraph.lineFrom >= paragraph.lineTo - 1" class="line-number">
                        {{ 'Line' | translate }} {{ paragraph.lineFrom }}
                    </span>
                    <span *ngIf="paragraph.lineFrom < paragraph.lineTo - 1" class="line-number">
                        {{ 'Line' | translate }} {{ paragraph.lineFrom }} - {{ paragraph.lineTo - 1 }}
                    </span>
                </h3>
                <editor [formControlName]="'text_' + paragraph.paragraphNo" [init]="tinyMceSettings"></editor>
                <div
                    *ngIf="
                        contentForm.get('text_' + paragraph.paragraphNo).invalid &&
                        (contentForm.get('text_' + paragraph.paragraphNo).dirty ||
                            contentForm.get('text_' + paragraph.paragraphNo).touched)
                    "
                    class="red-warning-text"
                    translate
                >
                    This field is required.
                </div>
            </section>
        </ng-container>

        <!-- Paragraph-based amendments -->
        <ng-container *ngIf="!editMotion && motion.isParagraphBasedAmendment()">
            <ng-container *ngTemplateOutlet="paragraphBasedAmendment"></ng-container>
        </ng-container>

        <!-- Reason -->
        <div *ngIf="motion.reason || editMotion">
            <h3
                [ngClass]="
                    reasonRequired &&
                    contentForm.get('reason').invalid &&
                    (contentForm.get('reason').dirty || contentForm.get('reason').touched)
                        ? 'red-warning-text'
                        : ''
                "
            >
                <span translate>Reason</span>&nbsp;<span *ngIf="reasonRequired && editMotion">*</span>
            </h3>
            <div class="motion-text" *ngIf="!editMotion" [innerHtml]="motion.reason | trust: 'html'"></div>

            <!-- The HTML Editor -->
            <editor
                formControlName="reason"
                [init]="tinyMceSettings"
                *ngIf="editMotion"
                [required]="reasonRequired"
            ></editor>
            <div
                *ngIf="
                    reasonRequired &&
                    contentForm.get('reason').invalid &&
                    (contentForm.get('reason').dirty || contentForm.get('reason').touched)
                "
                class="red-warning-text"
                translate
            >
                This field is required.
            </div>
        </div>

        <!-- Category form -->
        <div class="content-field" *ngIf="newMotion && categoryObserver.value.length > 0">
            <os-search-value-selector
                ngDefaultControl
                [formControl]="contentForm.get('category_id')"
                [includeNone]="true"
                listname="{{ 'Category' | translate }}"
                [inputListValues]="categoryObserver"
            ></os-search-value-selector>
        </div>

        <div class="extra-data">
            <!-- Attachments -->
            <div *ngIf="motion.hasAttachments() || editMotion" class="content-field">
                <div *ngIf="!editMotion">
                    <h3>{{ 'Attachments' | translate }}<mat-icon>attach_file</mat-icon></h3>
                    <mat-list dense>
                        <mat-list-item *ngFor="let file of motion.attachments">
                            <a [routerLink]="" (click)="onClickAttachment(file)">{{ file.title }}</a>
                        </mat-list-item>
                    </mat-list>
                </div>
                <div *osPerms="'motions.can_manage'; and: editMotion">
                    <os-attachment-control
                        (errorHandler)="showUploadError($event)"
                        [controlName]="contentForm.get('attachments_id')"
                    ></os-attachment-control>
                </div>
            </div>

            <div *ngIf="newMotion">
                <os-agenda-content-object-form [form]="contentForm"></os-agenda-content-object-form>
            </div>

            <!-- Supporter form -->
            <div class="content-field" *ngIf="editMotion && minSupporters">
                <div *ngIf="perms.isAllowed('change_metadata', motion)">
                    <os-search-value-selector
                        ngDefaultControl
                        [formControl]="contentForm.get('supporters_id')"
                        [multiple]="true"
                        listname="{{ 'Supporters' | translate }}"
                        [inputListValues]="supporterObserver"
                    ></os-search-value-selector>
                </div>
            </div>

            <!-- Workflow -->
            <div class="content-field" *ngIf="editMotion && workflowObserver.value.length > 1">
                <div *ngIf="perms.isAllowed('change_metadata', motion)">
                    <os-search-value-selector
                        ngDefaultControl
                        [formControl]="contentForm.get('workflow_id')"
                        listname="{{ 'Workflow' | translate }}"
                        [inputListValues]="workflowObserver"
                    ></os-search-value-selector>
                </div>
            </div>

            <!-- Origin form -->
            <div class="content-field" *ngIf="editMotion">
                <div *ngIf="perms.isAllowed('change_metadata', motion)">
                    <mat-form-field>
                        <input matInput placeholder="{{ 'Origin' | translate }}" formControlName="origin" />
                    </mat-form-field>
                </div>
            </div>
        </div>
    </form>
</ng-template>

<ng-template #paragraphBasedAmendment>
    <section class="text-holder">
        <!-- If the array exists, we do not have an error -->
        <div *ngIf="motion.diffLines">
            <div class="alert alert-info" *ngIf="motion.diffLines.length === 0">
                <span translate>No changes at the text.</span>
            </div>
            <div
                *ngFor="let paragraph of getAmendmentParagraphs(showAmendmentContext)"
                class="motion-text motion-text-diff amendment-view"
                [class.line-numbers-none]="isLineNumberingNone()"
                [class.line-numbers-inline]="isLineNumberingInline()"
                [class.line-numbers-outside]="isLineNumberingOutside()"
                [class.amendment-context]="showAmendmentContext"
            >
                <!-- TODO: everything here is required for PDF as well. Should be in a service -->
                <h3
                    *ngIf="paragraph.diffLineTo === paragraph.diffLineFrom + 1 && !showAmendmentContext"
                    class="amendment-line-header"
                >
                    {{ 'Line' | translate }} {{ paragraph.diffLineFrom }}:
                </h3>
                <h3
                    *ngIf="paragraph.diffLineTo !== paragraph.diffLineFrom + 1 && !showAmendmentContext"
                    class="amendment-line-header"
                >
                    {{ 'Line' | translate }} {{ paragraph.diffLineFrom }} - {{ paragraph.diffLineTo - 1 }}:
                </h3>

                <!-- TODO: Seems to be directly duplicated in the slide -->
                <div class="paragraphcontext" [innerHtml]="paragraph.textPre | trust: 'html'"></div>
                <div [innerHtml]="paragraph.text | trust: 'html'"></div>
                <div class="paragraphcontext" [innerHtml]="paragraph.textPost | trust: 'html'"></div>
            </div>
        </div>
        <div *ngIf="!motion.diffLines">
            <span class="red-warning-text" translate>
                There is an error with this amendment. Please edit it manually.
            </span>
        </div>
    </section>

    <!-- Show entire motion text -->
    <div>
        <mat-checkbox
            (change)="showAmendmentContext = !showAmendmentContext"
            *ngIf="motion && motion.isParagraphBasedAmendment()"
            class="show-entire-text-check"
        >
            <span translate>Show entire motion text</span>
        </mat-checkbox>
    </div>
</ng-template>

<!-- Line number Menu -->
<mat-menu #lineNumberingMenu="matMenu">
    <div *ngIf="motion">
        <button
            mat-menu-item
            translate
            (click)="setLineNumberingMode(LineNumberingMode.None)"
            [ngClass]="{ selected: lnMode === LineNumberingMode.None }"
        >
            none
        </button>
        <button
            mat-menu-item
            translate
            (click)="setLineNumberingMode(LineNumberingMode.Inside)"
            [ngClass]="{ selected: lnMode === LineNumberingMode.Inside }"
        >
            inline
        </button>
        <button
            mat-menu-item
            translate
            (click)="setLineNumberingMode(LineNumberingMode.Outside)"
            [ngClass]="{ selected: lnMode === LineNumberingMode.Outside }"
        >
            outside
        </button>
        <mat-divider></mat-divider>
        <button mat-menu-item *ngIf="!highlightedLineOpened" (click)="highlightedLineOpened = true">
            <mat-icon>redo</mat-icon>
            <span translate>Go to line</span>
        </button>
    </div>
</mat-menu>

<!-- Diff View Menu -->
<mat-menu #changeRecoMenu="matMenu">
    <button
        mat-menu-item
        translate
        (click)="setChangeRecoMode(ChangeRecoMode.Original)"
        [ngClass]="{ selected: crMode === ChangeRecoMode.Original }"
    >
        Original version
    </button>
    <button
        mat-menu-item
        translate
        (click)="setChangeRecoMode(ChangeRecoMode.Changed)"
        [ngClass]="{ selected: crMode === ChangeRecoMode.Changed }"
    >
        Changed version
    </button>
    <button
        mat-menu-item
        translate
        (click)="setChangeRecoMode(ChangeRecoMode.Diff)"
        [ngClass]="{ selected: crMode === ChangeRecoMode.Diff }"
    >
        Diff version
    </button>
    <button
        mat-menu-item
        translate
        (click)="setChangeRecoMode(ChangeRecoMode.Final)"
        [ngClass]="{ selected: crMode === ChangeRecoMode.Final }"
    >
        Final version
    </button>
    <button
        mat-menu-item
        translate
        *ngIf="motion && motion.modified_final_version"
        (click)="setChangeRecoMode(ChangeRecoMode.ModifiedFinal)"
        [ngClass]="{ selected: crMode === ChangeRecoMode.ModifiedFinal }"
    >
        Final print template
    </button>
</mat-menu>
