@let issue = diagnostic();
<section
    class="web-player-diagnostic"
    data-test-id="playback-diagnostic-banner"
    role="status"
>
    <div class="web-player-diagnostic__content">
        <div class="web-player-diagnostic__badge">
            <mat-icon aria-hidden="true">warning</mat-icon>
            <span>{{ getDiagnosticTitleKey(issue) | translate }}</span>
        </div>

        <h2 class="web-player-diagnostic__headline">
            {{ diagnosticHeadlineKey() | translate }}
        </h2>

        <div class="web-player-diagnostic__description">
            {{ getDiagnosticDescriptionKey(issue) | translate }}
        </div>

        @if (getDiagnosticMeta(issue); as meta) {
            <div class="web-player-diagnostic__meta">
                {{ meta }}
            </div>
        }

        @if (getDiagnosticCodecHint(issue); as codecHint) {
            <div
                class="web-player-diagnostic__codec-hint"
                data-test-id="playback-codec-hint"
            >
                {{
                    'PLAYBACK_DIAGNOSTICS.CODEC_HINT'
                        | translate: { codecs: codecHint }
                }}
            </div>
        }

        <div
            class="web-player-diagnostic__recommendations"
            role="group"
            [attr.aria-label]="
                'PLAYBACK_DIAGNOSTICS.RECOMMENDATIONS_LABEL' | translate
            "
        >
            @for (
                recommendation of recommendations();
                track getRecommendationKey(recommendation)
            ) {
                @if (recommendation.action === 'alternative-source') {
                    <fieldset
                        class="web-player-diagnostic__alternatives dark-theme"
                        [class.web-player-diagnostic__alternatives--primary]="
                            recommendation.priority === 'primary'
                        "
                        [disabled]="pending()"
                        data-test-id="playback-alternative-sources"
                    >
                        <legend
                            class="web-player-diagnostic__alternatives-title"
                        >
                            {{
                                'PORTALS.MULTI_SOURCE.TRY_ANOTHER_SOURCE'
                                    | translate
                            }}
                        </legend>
                        @for (
                            source of visibleAlternatives();
                            track source.id
                        ) {
                            <app-vod-source-row
                                [source]="source"
                                [showPin]="false"
                                (playRequested)="
                                    alternativeSourceRequested.emit($event)
                                "
                                (checkRequested)="
                                    sourceCheckRequested.emit($event)
                                "
                            />
                        }
                        @if (hiddenAlternativeCount() > 0) {
                            <p class="web-player-diagnostic__alternatives-more">
                                {{
                                    'PORTALS.MULTI_SOURCE.MORE_SOURCES'
                                        | translate
                                            : {
                                                  count: hiddenAlternativeCount(),
                                              }
                                }}
                            </p>
                        }
                    </fieldset>
                } @else {
                    <button
                        type="button"
                        class="web-player-diagnostic__player-card"
                        [class.web-player-diagnostic__player-card--primary]="
                            recommendation.priority === 'primary'
                        "
                        [attr.data-test-id]="
                            getRecommendationTestId(recommendation)
                        "
                        [class.web-player-diagnostic__player-card--disabled]="
                            pending()
                        "
                        [disabled]="
                            pending() &&
                            !isExternalPlayerRecommendation(recommendation)
                        "
                        [attr.aria-disabled]="pending() ? 'true' : null"
                        [attr.aria-busy]="
                            isExternalLaunching(recommendation) ? 'true' : null
                        "
                        (click)="activate(recommendation)"
                    >
                        @if (isExternalLaunching(recommendation)) {
                            <mat-spinner
                                aria-hidden="true"
                                diameter="18"
                                strokeWidth="2"
                            />
                        } @else {
                            <mat-icon aria-hidden="true">{{
                                getRecommendationIcon(recommendation)
                            }}</mat-icon>
                        }
                        <span class="web-player-diagnostic__player-copy">
                            <span class="web-player-diagnostic__player-label">
                                {{
                                    getRecommendationLabelKey(recommendation)
                                        | translate
                                            : getRecommendationParams(
                                                  recommendation
                                              )
                                }}
                            </span>
                            <span class="web-player-diagnostic__player-hint">
                                {{
                                    getRecommendationReasonKey(
                                        recommendation.reason
                                    ) | translate
                                }}
                            </span>
                            @if (
                                getExternalStatusKey(recommendation);
                                as statusKey
                            ) {
                                <span
                                    class="web-player-diagnostic__player-status"
                                    aria-live="polite"
                                >
                                    {{ statusKey | translate }}
                                </span>
                            }
                            @if (
                                isTemporaryBuiltInRecommendation(recommendation)
                            ) {
                                <span
                                    class="web-player-diagnostic__player-hint"
                                >
                                    {{
                                        'PLAYBACK_DIAGNOSTICS.ACTION_TRY_PLAYER_HINT'
                                            | translate
                                    }}
                                </span>
                            }
                        </span>
                    </button>
                }
            }
        </div>

        <div class="web-player-diagnostic__utilities">
            <button
                class="web-player-diagnostic__utility-button"
                type="button"
                [cdkCopyToClipboard]="diagnosticReport()"
                (cdkCopyToClipboardCopied)="onReportCopied($event)"
                [matTooltip]="'PLAYBACK_DIAGNOSTICS.REPORT_PRIVACY' | translate"
                data-test-id="playback-copy-diagnostic"
            >
                <mat-icon aria-hidden="true">content_copy</mat-icon>
                {{ 'PLAYBACK_DIAGNOSTICS.ACTION_COPY_DIAGNOSTIC' | translate }}
            </button>
            <span
                aria-live="polite"
                data-test-id="playback-copy-diagnostic-status"
            >
                {{ copyStatusKey() ? (copyStatusKey() | translate) : '' }}
            </span>
            <button
                class="web-player-diagnostic__utility-button"
                type="button"
                [cdkCopyToClipboard]="playback().streamUrl"
                [matTooltip]="playback().streamUrl"
                data-test-id="playback-copy-url"
            >
                <mat-icon aria-hidden="true">content_copy</mat-icon>
                {{ 'PLAYBACK_DIAGNOSTICS.ACTION_COPY_URL' | translate }}
            </button>

            <span
                class="web-player-diagnostic__divider"
                aria-hidden="true"
            ></span>

            <details
                class="web-player-diagnostic__details"
                data-test-id="playback-diagnostic-details"
            >
                <summary>
                    <mat-icon aria-hidden="true">expand_more</mat-icon>
                    {{ 'PLAYBACK_DIAGNOSTICS.DETAILS_SUMMARY' | translate }}
                </summary>
                <dl>
                    @for (
                        detail of getDiagnosticDetails(issue);
                        track detail.labelKey
                    ) {
                        <div class="web-player-diagnostic__detail-row">
                            <dt>{{ detail.labelKey | translate }}</dt>
                            <dd>
                                {{
                                    detail.valueKey
                                        ? (detail.valueKey | translate)
                                        : detail.value
                                }}
                            </dd>
                        </div>
                    }
                </dl>
            </details>
        </div>
    </div>
</section>