@if (!showMobileView) {
    <div class="desktop-box">
        <ng-container *ngTemplateOutlet="feedbackButtons"></ng-container>
    </div>
}

@if (showMobileView) {
    <button #mobileButton class="mobile-button" [nxPopoverTriggerFor]="mobilePopover" nxPopoverTrigger="click">
        <nx-icon name="speech-bubble-o"></nx-icon>
    </button>
}

<nx-popover #mobilePopover>
    <ng-container *ngTemplateOutlet="feedbackButtons"></ng-container>
</nx-popover>

<ng-template #feedbackButtons>
    <p class="nx-margin-top-0 nx-margin-bottom-0 nx-font-weight-semibold">Give us your feedback!</p>
    <p class="nx-margin-top-0">Was this helpful?</p>
    <a #positiveButton nxButton="secondary small" class="nx-margin-right-2xs" [href]="feedbackLinkPositive" rel="nofollow" target="_blank">
        <nx-icon name="sentiment-very-satisfied" class="nx-margin-right-2xs"></nx-icon>
        Yes
    </a>
    <a #negativeButton nxButton="secondary small" [href]="feedbackLinkNegative" rel="nofollow" target="_blank">
        <nx-icon name="sentiment-very-dissatisfied" class="nx-margin-right-2xs"></nx-icon>
        No
    </a>
</ng-template>