<os-meta-text-block showActionRow="true" [disableExpandControl]="true">
    <ng-container class="meta-text-block-title">
        <span translate>Voting result</span>
        <span *ngIf="pollIndex">&nbsp;({{ pollIndex + 1 }})</span>
    </ng-container>
    <ng-container class="meta-text-block-content">
        <div class="motion-poll-wrapper">
            <div *ngIf="poll.has_votes" class="poll-result">
                <div *ngFor="let key of pollValues">
                    <div class="poll-progress" *ngIf="poll[key] !== undefined">
                        <mat-icon class="main-nav-color" matTooltip="{{ getLabel(key) | translate }}">
                            {{ getIcon(key) }}
                        </mat-icon>
                        <div class="progress-container">
                            <div>
                                <span>{{ getLabel(key) | translate }}</span
                                >:&nbsp;{{ getNumber(key) }}
                                <span *ngIf="!isAbstractValue(key)">({{ getPercent(key) }}%)</span>
                            </div>
                            <div *ngIf="!isAbstractValue(key)" class="poll-progress-bar">
                                <mat-progress-bar
                                    mode="determinate"
                                    [value]="getPercent(key)"
                                    [ngClass]="pollService.getProgressBarColor(key)"
                                >
                                </mat-progress-bar>
                            </div>
                        </div>
                    </div>
                    <hr *ngIf="key === 'abstain'" flex />
                </div>
                <!-- quorum -->
                <div *osPerms="'motions.can_manage'">
                    <div class="poll-quorum-line" *ngIf="!abstractPoll">
                        <span>
                            <span *ngIf="yesQuorum">
                                <mat-icon color="warn" *ngIf="!quorumYesReached"> thumb_down </mat-icon>
                                <mat-icon color="primary" *ngIf="quorumYesReached"> thumb_up </mat-icon>
                            </span>
                            <button mat-button [matMenuTriggerFor]="majorityMenu">
                                &nbsp;<span>{{ getQuorumLabel() | translate }}</span> &nbsp;<span
                                    *ngIf="majorityChoice !== 'disabled'"
                                    >({{ yesQuorum }})</span
                                >
                            </button>
                            <span *ngIf="majorityChoice !== 'disabled'">
                                <span *ngIf="quorumYesReached" translate> reached.</span>
                                <span *ngIf="!quorumYesReached" translate> not reached.</span>
                            </span>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </ng-container>
    <ng-container class="meta-text-block-action-row" *osPerms="'motions.can_manage_metadata'">
        <button mat-icon-button matTooltip="{{ 'Edit' | translate }}" (click)="editPoll()">
            <mat-icon inline>edit</mat-icon>
        </button>
        <button mat-icon-button matTooltip="{{ 'Print ballot papers' | translate }}" (click)="printBallots()">
            <mat-icon inline>local_printshop</mat-icon>
        </button>
        <button mat-icon-button matTooltip="{{ 'Delete' | translate }}" (click)="deletePoll()">
            <mat-icon inline>delete</mat-icon>
        </button>
    </ng-container>
</os-meta-text-block>

<mat-menu #majorityMenu="matMenu">
    <button mat-menu-item *ngFor="let option of majorityChoices" (click)="majorityChoice = option.value">
        <span>{{ option.display_name | translate }}</span>
    </button>
</mat-menu>
