problem-details.component.html

@let appMode = appMode$ | async;
@let currentUser = currentUser$ | async;

@if (problemDetails(); as details) {
<div>
    @if (currentUser?.canChangeProblemVisibility) {
    <la-visibility-toggle [problem]="problem()" />
    }
    <table class="table table-sm table-borderless">
        <tbody>
            <tr>
                <td i18n>ID:</td>
                <td>{{ details.problemId }}</td>
            </tr>
            <tr>
                <td i18n>Dataset:</td>
                <td>{{ datasetLabels[details.dataset] }}</td>
            </tr>
            <tr>
                <td i18n>Entailment label:</td>
                <td>
                    <la-entailment-label-badge
                        [entailmentLabel]="details.entailmentLabel"
                    ></la-entailment-label-badge>
                </td>
            </tr>
            <tr>
                <td class="text-muted" i18n>Based on:</td>
                @if (appMode === 'browse' && details.baseProblemId !== null) {
                <td>
                    <a [routerLink]="['/annotate', details.baseProblemId]">
                        <span>{{ details.baseProblemId }}</span>
                        <fa-icon [icon]="faArrowUpRight" class="ms-2" />
                    </a>
                </td>
                } @else if (details.baseProblemId === null) {
                <td i18n>None</td>
                } @else {
                <td>{{ details.baseProblemId }}</td>
                }
            </tr>
            @if (sectionString()) {
            <tr>
                <td i18n>Section:</td>
                <td>{{ sectionString() }}</td>
            </tr>
            } @if (details.comment) {
            <tr>
                <td>
                    <span i18n>Comment:</span>
                    <fa-icon
                        class="ms-1"
                        [icon]="faQuestionCircle"
                        aria-hidden="true"
                        ngbTooltip="Comments provided by Bill McCartney."
                        i18n-ngbTooltip
                    />
                </td>
                <td>
                    <i>{{ details.comment }}</i>
                </td>
            </tr>
            }
            <tr>
                <td i18n>Labels:</td>
                <td>
                    <la-problem-labels
                        [problemId]="details.problemId"
                        [labelAnnotations]="details.labelAnnotations"
                    ></la-problem-labels>
                </td>
            </tr>
        </tbody>
    </table>
</div>
}