<os-head-bar
    [nav]="false"
    [editMode]="true"
    saveText="Create"
    [isSaveButtonEnabled]="matStepper.selectedIndex === 1"
    (saveEvent)="saveAmendment()"
    (cancelEditEvent)="cancelCreation()"
>
    <!-- Title -->
    <div class="title-slot"><h2 translate>New amendment</h2></div>

    <!-- Next-button -->
    <div class="extra-controls-slot">
        <div *ngIf="matStepper.selectedIndex === 0">
            <button
                mat-button
                [disabled]="contentForm.value.selectedParagraphs.length === 0"
                (click)="matStepper.next()"
            >
                <span class="upper" translate>Next</span>
            </button>
        </div>
        <div *ngIf="matStepper.selectedIndex === 1">
            <button type="button" mat-button (click)="matStepper.previous()">
                <span class="upper" translate>Previous</span>
            </button>
        </div>
    </div>
</os-head-bar>

<form [formGroup]="contentForm" (ngSubmit)="saveAmendment()">
    <mat-horizontal-stepper #matStepper linear>
        <mat-step [completed]="contentForm.value.selectedParagraphs.length > 0">
            <ng-template matStepLabel>{{ 'Select paragraphs' | translate }}</ng-template>
            <div class="amendment-create-wizard-wrapper">
                <section
                    *ngFor="let paragraph of paragraphs"
                    class="paragraph-row"
                    [class.active]="isParagraphSelected(paragraph)"
                    (click)="onParagraphClicked(paragraph)"
                >
                    <mat-checkbox
                        *ngIf="multipleParagraphsAllowed"
                        class="paragraph-select"
                        [checked]="isParagraphSelected(paragraph)"
                        (click)="checkboxClicked($event)"
                    >
                    </mat-checkbox>
                    <mat-radio-button
                        *ngIf="!multipleParagraphsAllowed"
                        class="paragraph-select"
                        [checked]="isParagraphSelected(paragraph)"
                    >
                    </mat-radio-button>
                    <div class="paragraph-text motion-text" [innerHTML]="paragraph.html | trust: 'html'"></div>
                </section>
            </div>
        </mat-step>
        <mat-step>
            <ng-template matStepLabel>{{ 'Change paragraph' | translate }}</ng-template>

            <h3><span translate>Amendment text</span></h3>

            <!-- Text -->
            <section *ngFor="let paragraph of contentForm.value.selectedParagraphs">
                <h4>
                    <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
                    >
                </h4>
                <editor [formControlName]="'text_' + paragraph.paragraphNo" [init]="tinyMceSettings"></editor>
            </section>

            <!-- Reason -->
            <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">*</span>
            </h3>

            <editor formControlName="reason" [init]="tinyMceSettings" required></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>
        </mat-step>
    </mat-horizontal-stepper>
</form>
