{% if PANORAMA_MFE_ENABLED and current_mfe is not defined %}
function PanoramaNavigationLink() {
  const [user, setUser] = panoramaUseState(() => panoramaGetAuthenticatedUser());
  const [access, setAccess] = panoramaUseState(null);
  const { PANORAMA_URL: href, LMS_BASE_URL: lms } = panoramaGetConfig();
  panoramaUseEffect(() => {
    const changed = () => setUser(panoramaGetAuthenticatedUser());
    const subscription = panoramaSubscribe(PANORAMA_AUTH_CHANGED, changed);
    changed();
    return () => panoramaUnsubscribe(subscription);
  }, []);
  panoramaUseEffect(() => {
    let active = true;
    setAccess(null);
    if (user && href && lms) {
      panoramaGetAuthenticatedHttpClient().get(`${lms}/panorama/api/get-user-access`)
        .then(({ data }) => { if (active) setAccess({ user, allowed: data.body === true }); })
        .catch(() => { if (active) setAccess(null); });
    }
    return () => { active = false; };
  }, [user, href, lms]);
  return href && user && access?.user === user && access.allowed
    ? panoramaCreateElement('a', { className: 'nav-link', href }, 'Panorama') : null;
}
{% endif %}
