{#if $isUserLoggedIn}
  {#if $bubbleTimelineEnabled}
    <TimelinePage timeline="bubble">
      {#if $pinnedPage !== '/bubble'}
        <DynamicPageBanner title="{'intl.bubbleTimeline'}" icon="#fa-circle"/>
      {/if}
    </TimelinePage>
  {:else}
    <FreeTextLayout>
      <h1>{'intl.bubble'}</h1>

      <p>{'intl.bubbleTimelineNotSupported'}</p>
    </FreeTextLayout>
  {/if}
{:else}
  <HiddenFromSSR>
    <FreeTextLayout>
      <h1>{'intl.bubble'}</h1>

      <p>{'intl.bubbleTimelineNotLoggedIn'}</p>
    </FreeTextLayout>
  </HiddenFromSSR>
{/if}
<script>
  import TimelinePage from '../_components/TimelinePage.html'
  import FreeTextLayout from '../_components/FreeTextLayout.html'
  import { store } from '../_store/store.js'
  import HiddenFromSSR from '../_components/HiddenFromSSR.html'
  import DynamicPageBanner from '../_components/DynamicPageBanner.html'

  export default {
    store: () => store,
    components: {
      TimelinePage,
      FreeTextLayout,
      HiddenFromSSR,
      DynamicPageBanner
    }
  }
</script>