OpenSlides/client/src/app/site/motions/motion-detail/motion-detail.component.html

<mat-toolbar color='primary'>

    <button (click)='editMotionButton()' [ngClass]="{'save-button': editMotion}" class='generic-mini-button on-transition-fade save-button' mat-mini-fab>
        <fa-icon *ngIf="!editMotion" icon='pen'></fa-icon>
        <fa-icon *ngIf="editMotion" icon='check'></fa-icon>
    </button>

    <div class='motion-title on-transition-fade'>
        <span translate>Motion</span>
        <span *ngIf="!editMotion"> {{motion.identifier}}</span>
        <span *ngIf="editMotion"> {{metaInfoForm.get('identifier').value}}</span>
        <span>:</span>
        <span *ngIf="!editMotion"> {{motion.currentTitle}}</span>
        <span *ngIf="editMotion"> {{contentForm.get('currentTitle').value}}</span>
        <br>
        <div class='motion-submitter'>
            <span translate>by</span> {{motion.submitterName}}
        </div>
    </div>
</mat-toolbar>

<mat-accordion multi='true' class='on-transition-fade'>

    <!-- MetaInfo -->
    <!-- <mat-expansion-panel #metaInfoPanel [expanded]='true' class='meta-info-panel'> -->
    <mat-expansion-panel #metaInfoPanel class='meta-info-panel'>
        <mat-expansion-panel-header>
            <mat-panel-title>
                <fa-icon icon='info-circle' [fixedWidth]="true"></fa-icon>
                <span translate>Meta information</span>
            </mat-panel-title>
        </mat-expansion-panel-header>

        <!-- Meta info -->
        <form [formGroup]='metaInfoForm' class='expansion-panel-custom-body' (ngSubmit)='saveMotion()'>

            <!-- Identifier -->
            <div *ngIf="editMotion">
                <div *ngIf='!editMotion'>
                    <h3 translate>Identifier</h3>
                    {{motion.identifier}}
                </div>
                <mat-form-field *ngIf="editMotion">
                    <input matInput placeholder='Identifier' formControlName='identifier' [value]='motion.identifier'>
                </mat-form-field>
            </div>

            <!-- Submitter -->
            <div *ngIf="motion.submitterName || editMotion">
                <h3 translate>Submitters</h3>
                {{motion.submitterName}}
            </div>

            <!-- Supporter -->
            <div *ngIf='motion.supporters_id && motion.supporters_id.length > 0 || editMotion'>
                <h3 translate>Supporters</h3>
                <!-- print all motion supporters -->
            </div>

            <!-- State -->
            <div *ngIf='motion.state_id || editMotion'>
                <div *ngIf='!editMotion'>
                    <h3 translate>State</h3>
                    {{motion.state.name}}
                </div>
                <mat-form-field *ngIf="editMotion">
                    <mat-select placeholder='State' formControlName='state_id'>
                        <mat-option *ngFor="let state of motion.possible_states" [value]="state.id">{{state}}</mat-option>
                        <mat-divider></mat-divider>
                        <mat-option>
                            <fa-icon icon='exclamation-triangle'></fa-icon>
                            <span translate>Reset State</span>
                        </mat-option>
                    </mat-select>
                </mat-form-field>
            </div>

            <!-- Recommendation -->
            <!-- The suggestion of the work group weather or not a motion should be accepted -->
            <div *ngIf='motion.recomBy && (motion.recommendation_id || editMotion)'>
                <div *ngIf='!editMotion'>
                    <h3>{{motion.recomBy}}</h3>
                    {{motion.recommendation.name}}
                </div>
                <mat-form-field *ngIf="editMotion">
                    <mat-select placeholder='Recommendation' formControlName='recommendation_id'>
                        <mat-option *ngFor="let state of motion.possible_states" [value]="state.id">{{state}}</mat-option>
                        <mat-divider></mat-divider>
                        <mat-option>
                            <fa-icon icon='exclamation-triangle'></fa-icon>
                            <span translate>Reset recommendation</span>
                        </mat-option>
                    </mat-select>
                </mat-form-field>
                <!-- <h3>
                    <a [matMenuTriggerFor]="stateMenu">
                        <span>{{motion.recomBy}}</span>
                    </a>
                </h3> -->
                <!-- {{motion.recommendation}} -->
            </div>

            <!-- Category -->
            <div *ngIf="motion.category_id || editMotion">
                <div *ngIf='!editMotion'>
                    <h3 translate> Category</h3>
                    {{motion.category}}
                </div>
                <mat-form-field *ngIf="editMotion">
                    <mat-select placeholder='Category' formControlName='category_id'>
                        <mat-option>None</mat-option>
                        <mat-divider></mat-divider>
                        <mat-option *ngFor="let cat of getMotionCategories()" [value]="cat.id">{{cat}}</mat-option>
                    </mat-select>
                </mat-form-field>
            </div>

            <!-- Origin -->
            <div *ngIf="motion.origin || editMotion">
                <div *ngIf='!editMotion'>
                    <h3 translate> Origin</h3>
                    {{motion.origin}}
                </div>
                <mat-form-field *ngIf="editMotion">
                    <input matInput placeholder='Origin' formControlName='origin' [value]='motion.origin'>
                </mat-form-field>
            </div>

            <!-- Voting -->
            <!-- <div *ngIf='motion.polls && motion.polls.length > 0 || editMotion'>
                <h3 translate>Voting</h3>
            </div> -->
        </form>
    </mat-expansion-panel>

    <!-- Personal Note -->
    <mat-expansion-panel>
        <mat-expansion-panel-header>
            <mat-panel-title>
                <fa-icon icon='file-signature' [fixedWidth]="true"></fa-icon>
                <span translate>Personal note</span>
            </mat-panel-title>
        </mat-expansion-panel-header>
        TEST
    </mat-expansion-panel>

    <!-- Content -->
    <mat-expansion-panel #contentPanel [expanded]='true' class='content-panel'>
        <mat-expansion-panel-header>
            <mat-panel-title>
                <fa-icon icon='align-left' [fixedWidth]="true"></fa-icon>
                <span translate>Content</span>
            </mat-panel-title>
        </mat-expansion-panel-header>

        <form [formGroup]='contentForm' class='expansion-panel-custom-body' (ngSubmit)='saveMotion()'>

            <!-- Title -->
            <div *ngIf="motion.currentTitle || editMotion">
                <div *ngIf='!editMotion'>
                    <h2>{{motion.currentTitle}}</h2>
                </div>
                <mat-form-field *ngIf="editMotion" class='wide-text'>
                    <input matInput placeholder='Title' formControlName='currentTitle' [value]='motion.currentTitle'>
                </mat-form-field>
            </div>

            <!-- Text -->
            <!-- TODO: this is a config variable. Read it out -->
            <h3 translate>The assembly may decide:</h3>
            <div *ngIf='!editMotion'>
                <div [innerHtml]='motion.currentText'></div>
            </div>
            <mat-form-field *ngIf="editMotion" class='wide-text'>
                <textarea matInput placeholder='Motion Text' formControlName='currentText' [value]='motion.currentText'></textarea>
            </mat-form-field>

            <!-- Reason -->
            <div *ngIf="motion.currentReason || editMotion">
                <div *ngIf='!editMotion'>
                    <h4 translate>Reason</h4>
                    <div [innerHtml]='motion.currentReason'></div>
                </div>
                <mat-form-field *ngIf="editMotion" class='wide-text'>
                    <textarea matInput placeholder="Reason" formControlName='currentReason' [value]='motion.currentReason'></textarea>
                </mat-form-field>
            </div>
        </form>

    </mat-expansion-panel>
</mat-accordion>