<h1 mat-dialog-title>{{ 'Export motions' | translate }}</h1>

<form [formGroup]="exportForm">
    <!-- Content -->
    <div mat-dialog-content class="motion-export-dialog-wrapper">
        <div>
            <p class="toggle-group-head" translate>Format</p>
            <mat-button-toggle-group class="smaller-buttons" formControlName="format">
                <mat-button-toggle [value]="fileFormat.PDF">PDF</mat-button-toggle>
                <mat-button-toggle [value]="fileFormat.CSV">CSV</mat-button-toggle>
                <mat-button-toggle [value]="fileFormat.XLSX">XLSX</mat-button-toggle>
            </mat-button-toggle-group>
        </div>

        <div>
            <p class="toggle-group-head" translate>Line numbering</p>
            <mat-button-toggle-group class="smaller-buttons" formControlName="lnMode">
                <mat-button-toggle [value]="lnMode.None"> <span translate>None</span> </mat-button-toggle>
                <mat-button-toggle [value]="lnMode.Outside"> <span translate>Outside</span> </mat-button-toggle>
            </mat-button-toggle-group>
        </div>

        <div>
            <p class="toggle-group-head" translate>Change recommendations</p>
            <mat-button-toggle-group class="smaller-buttons" formControlName="crMode">
                <mat-button-toggle [value]="crMode.Original">
                    <span translate>Original version</span>
                </mat-button-toggle>
                <mat-button-toggle [value]="crMode.Changed"> <span translate>Changed version</span> </mat-button-toggle>
                <mat-button-toggle [value]="crMode.Diff" #diffVersionButton>
                    <span translate>Diff version</span>
                </mat-button-toggle>
                <mat-button-toggle [value]="crMode.ModifiedFinal"> <span translate>Final version</span> </mat-button-toggle>
            </mat-button-toggle-group>
        </div>

        <div>
            <p class="toggle-group-head" translate>Content</p>
            <mat-button-toggle-group class="smaller-buttons" multiple formControlName="content">
                <mat-button-toggle value="text"> <span translate>Text</span> </mat-button-toggle>
                <mat-button-toggle value="reason"> <span translate>Reason</span> </mat-button-toggle>
            </mat-button-toggle-group>
        </div>

        <div>
            <p class="toggle-group-head" translate>Meta information</p>
            <mat-button-toggle-group class="smaller-buttons" multiple formControlName="metaInfo">
                <mat-button-toggle *ngFor="let metaInfo of metaInfoExportOrder" [value]="metaInfo">
                    <span>{{ getLabelForMetadata(metaInfo) | translate }}</span>
                </mat-button-toggle>
                <mat-button-toggle *osPerms="'agenda.can_see_list_of_speakers'" value="speakers" #speakersButton>
                    <span translate>Speakers</span>
                </mat-button-toggle>
                <mat-button-toggle value="polls" #votingResultButton>
                    <span translate>Voting result</span>
                </mat-button-toggle>
            </mat-button-toggle-group>
        </div>
        <div>
            <p class="toggle-group-head" translate>PDF options</p>
            <mat-button-toggle-group class="smaller-buttons" multiple formControlName="pdfOptions">
                <mat-button-toggle value="toc"> <span translate>Table of contents</span> </mat-button-toggle>
                <mat-button-toggle value="page"> <span translate>Page numbers</span> </mat-button-toggle>
                <mat-button-toggle value="date"> <span translate>Current date</span> </mat-button-toggle>
            </mat-button-toggle-group>
        </div>

        <div>
            <p class="toggle-group-head" translate>Comments</p>
            <mat-button-toggle-group class="smaller-buttons" multiple formControlName="comments">
                <mat-button-toggle [value]="PERSONAL_NOTE_ID">
                    <span translate>Personal note</span>
                </mat-button-toggle>
                <mat-button-toggle *ngFor="let comment of commentsToExport" [value]="comment.id">
                    <span>{{ comment.name }}</span>
                </mat-button-toggle>
            </mat-button-toggle-group>
            <!-- TODO only if not csv -->
        </div>

        <br />
    </div>

    <!-- Action buttons -->
    <div mat-dialog-actions>
        <button mat-button type="button" color="primary" [mat-dialog-close]="exportForm.value">
            <span translate>Export</span>
        </button>
        <button mat-button type="button" (click)="onCloseClick()"><span translate>Cancel</span></button>
    </div>
</form>
