<section ion-list class="addon-qtype-match-container" *ngIf="question.loaded">
    <ion-item text-wrap>
        <p><core-format-text [component]="component" [componentId]="componentId" [text]="question.text"></core-format-text></p>
    </ion-item>
    <ion-item text-wrap *ngFor="let row of question.rows">
        <ion-grid item-content>
            <ion-row>
                <ion-col>
                    <p><core-format-text id="addon-qtype-match-question-{{row.id}}" [component]="component" [componentId]="componentId" [text]="row.text"></core-format-text></p>
                </ion-col>
                <ion-col [ngClass]='{"core-question-answer-correct": row.isCorrect === 1, "core-question-answer-incorrect": row.isCorrect === 0}'>
                    <label class="accesshide" for="{{row.id}}" *ngIf="row.accessibilityLabel">{{ row.accessibilityLabel }}</label>
                    <ion-select id="{{row.id}}" [name]="row.name" [attr.aria-labelledby]="'addon-qtype-match-question-' + row.id" [(ngModel)]="row.selected" interface="popover">
                        <ion-option *ngFor="let option of row.options" [value]="option.value">{{option.label}}</ion-option>
                    </ion-select>

                    <!-- ion-select doesn't use a select. Create a hidden input to hold the selected value. -->
                    <input type="hidden" [ngModel]="row.selected" [attr.name]="row.name">
                </ion-col>
            </ion-row>
        </ion-grid>
    </ion-item>
</section>
