<div *ngIf="data">
    <div
        id="sidebox"
        *ngIf="data.data.show_meta_box"
        [ngStyle]="{ 'margin-top': projector.show_header_footer ? '144px' : '94px' }"
    >
        <!-- Submitters -->
        <h3 translate>Submitters</h3>
        <span *ngFor="let submitter of data.data.submitters; let last = last">
            {{ submitter }}<span *ngIf="!last">, </span>
        </span>

        <!-- Recommendation -->
        <div *ngIf="data.data.recommendation && data.data.recommender">
            <h3>{{ data.data.recommender }}</h3>
            {{ getRecommendationLabel() }}
        </div>
    </div>

    <div [ngStyle]="{ width: data.data.show_meta_box ? 'calc(100% - 250px)' : '100%' }">
        <!-- Title -->
        <div class="spacer" [ngStyle]="{ height: projector.show_header_footer ? '50px' : '0' }"></div>
        <div [ngClass]="{ slidetitle: data.data.show_meta_box }">
            <h1>
                <span *ngIf="data.data.identifier">{{ data.data.identifier }}:</span>
                {{ getTitleWithChanges() }}
            </h1>
            <!-- recommendation referencing motions -->
            <h2 *ngIf="data.data.show_meta_box && data.data.recommendation_referencing_motions">
                <span translate>Referring motions</span>:
                <span *ngFor="let titleInformation of referencingMotions; let last = last">
                    {{ getIdentifierOrTitle(titleInformation) }}<span *ngIf="!last">,</span>
                </span>
            </h2>

            <div *ngIf="!data.data.show_meta_box">
                <table class="metatable spacer-top-20" cellpadding="0" cellspacing="0">
                    <!-- Submitters -->
                    <tr>
                        <td class="min">
                            <b>{{ 'Submitters' | translate }}:</b>
                        </td>
                        <td>
                            <span *ngFor="let submitter of data.data.submitters; let last = last">
                                {{ submitter }}<span *ngIf="!last">, </span>
                            </span>
                        </td>
                    </tr>
                    <!-- Recommendation -->
                    <tr *ngIf="data.data.recommendation && data.data.recommender">
                        <td class="min">
                            <b>{{ data.data.recommender }}:</b>
                        </td>
                        <td>
                            {{ getRecommendationLabel() }}
                        </td>
                    </tr>
                    <!-- recommendation referencing motions -->
                    <tr *ngIf="data.data.recommendation_referencing_motions">
                        <td class="min">
                            <b>{{ 'Referring motions' | translate }}:</b>
                        </td>
                        <td>
                            <span *ngFor="let titleInformation of referencingMotions; let last = last">
                                {{ getIdentifierOrTitle(titleInformation) }}<span *ngIf="!last">,</span>
                            </span>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>

    <div id="text-wrapper">
        <div id="text" [ngStyle]="textDivStyles">
            <!-- Text -->
            <span
                *ngIf="isStatuteAmendment() || isParagraphBasedAmendment() || !!getFormattedText()"
                class="text-prefix-label"
                >{{ preamble | translate }}</span
            >

            <!-- Regular motions or traditional amendments -->
            <ng-container *ngIf="!isStatuteAmendment() && !isParagraphBasedAmendment()">
                <div
                    class="motion-text"
                    [class.line-numbers-none]="isLineNumberingNone()"
                    [class.line-numbers-inline]="isLineNumberingInline()"
                    [class.line-numbers-outside]="isLineNumberingOutside()"
                >
                    <div *ngIf="getTitleChangingObject() && crMode === 'diff'">
                        <div class="bold">{{ 'Changed title' | translate }}:</div>
                        <div [innerHTML]="getFormattedTitleDiff() | trust: 'html'"></div>
                    </div>
                    <div *ngIf="getFormattedText()" [innerHTML]="getFormattedText() | trust: 'html'"></div>
                </div>
            </ng-container>

            <!-- Statute amendments -->
            <div
                class="motion-text line-numbers-none"
                *ngIf="isStatuteAmendment()"
                [innerHTML]="getFormattedStatuteAmendment() | trust: 'html'"
            ></div>

            <!-- Amendment text -->
            <section class="text-holder" *ngIf="isParagraphBasedAmendment()">
                <div class="alert alert-info" *ngIf="getAmendedParagraphs().length === 0">
                    <span translate>No changes at the text.</span>
                </div>
                <div
                    *ngFor="let paragraph of getAmendedParagraphs()"
                    class="motion-text motion-text-diff amendment-view"
                    [class.line-numbers-none]="isLineNumberingNone()"
                    [class.line-numbers-inline]="isLineNumberingInline()"
                    [class.line-numbers-outside]="isLineNumberingOutside()"
                >
                    <h3 *ngIf="paragraph.diffLineTo === paragraph.diffLineFrom + 1" class="amendment-line-header">
                        <span translate>Line</span> {{ paragraph.diffLineFrom }}:
                    </h3>
                    <h3 *ngIf="paragraph.diffLineTo !== paragraph.diffLineFrom + 1" class="amendment-line-header">
                        <span translate>Line</span> {{ paragraph.diffLineFrom }} - {{ paragraph.diffLineTo - 1 }}:
                    </h3>
                    <div [innerHtml]="paragraph.text | trust: 'html'"></div>
                </div>
            </section>

            <!-- Reason -->
            <div *ngIf="data.data.reason">
                <h3 translate>Reason</h3>
                <div [innerHTML]="data.data.reason | trust: 'html'"></div>
            </div>
        </div>
    </div>
</div>
