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

<mat-toolbar color='primary'>

    <button class='generic-mini-button on-transition-fade' mat-mini-fab>
        <fa-icon icon='pen'></fa-icon>
    </button>

    <!-- motion.identifier -->
    <!-- motion.versions[0].title -->
    <div class='motion-title on-transition-fade'>
        <span translate>Motion</span> {{motion.identifier}}: {{motion.currentTitle}}
        <br>
        <div class='motion-submitter'>
            <span translate>by</span> {{motion.submitterName}}
        </div>
    </div>
</mat-toolbar>

<mat-accordion multi='true' class='on-transition-fade'>
    <!-- <mat-expansion-panel [expanded]='true' class='meta-info-panel'> -->
    <mat-expansion-panel 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>
        <div class='meta-info-panel-body'>

            <div *ngIf="motion.submitterName">
                <h3 translate>Submitters</h3>
                {{motion.submitterName}}
            </div>

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

            <div *ngIf='motion.state_id'>
                <h3>
                    <a [matMenuTriggerFor]="stateMenu">
                        <span translate>Status</span>
                        <fa-icon icon='cog'></fa-icon>
                    </a>
                </h3>
                {{motion.stateName}}
            </div>

            <div *ngIf='motion.recommendation_id'>
                <h3>
                    <a [matMenuTriggerFor]="stateMenu">
                        <span>{{motion.recomBy}}</span>
                        <fa-icon icon='cog'></fa-icon>
                    </a>
                </h3>
                {{motion.recommendation}}
            </div>

            <div *ngIf="motion.category_id">
                <h3>
                    <a [matMenuTriggerFor]="categoryMenu">
                        <span translate>Category</span>
                        <fa-icon icon='cog'></fa-icon>
                    </a>
                </h3>
                {{motion.category}}
            </div>

            <div *ngIf="motion.origin">
                <h3>
                    <span translate>Origin</span>
                    <fa-icon icon='cog'></fa-icon>
                </h3>
                <span>{{motion.origin}}</span>

                <br>
                <mat-form-field>
                    <input matInput #origin placeholder='Origin' value={{motion.origin}}>
                </mat-form-field>
            </div>

            <div *ngIf='motion.polls && motion.polls.length > 0'>
                <h3 translate>Voting</h3>
            </div>
        </div>
    </mat-expansion-panel>
    <!-- <mat-expansion-panel [expanded]='true'> -->
    <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>
    <mat-expansion-panel [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>

        <h3 translate>The assembly may decide:</h3>
        <div [innerHtml]='motion.currentText'></div>

        <h4 *ngIf='motion.currentReason' translate class='motion-reason-label'>Reason</h4>
        <div [innerHtml]='motion.currentReason'></div>

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

<!-- dummy values -->
<mat-menu #stateMenu="matMenu">
    <button mat-menu-item translate>Accept</button>
    <button mat-menu-item translate>Reject</button>
    <button mat-menu-item translate>Do not decice</button>
</mat-menu>

<mat-menu #categoryMenu="matMenu">
    <button mat-menu-item translate>B - Bildung</button>
    <button mat-menu-item translate>T - Test</button>
</mat-menu>