{#if $isUserLoggedIn}
<TimelinePage {timeline} >
  <DynamicPageBanner title="" {ariaTitle} />
  {#if $currentAccountProfile && $currentVerifyCredentials}
  <AccountProfile account={$currentAccountProfile}
                  relationship={$currentAccountRelationship}
                  verifyCredentials={$currentVerifyCredentials}
                  {filter}
  />
  {/if}
  {#if !filter}
    <PinnedStatuses {accountId} />
  {/if}
</TimelinePage>
{:else}
<HiddenFromSSR>
  <FreeTextLayout>
    <h1>{'intl.profile'}</h1>

    <p>{'intl.profileNotLoggedIn'}</p>
  </FreeTextLayout>
</HiddenFromSSR>
{/if}
<script>
  import TimelinePage from '../TimelinePage.html'
  import FreeTextLayout from '../FreeTextLayout.html'
  import { store } from '../../_store/store.js'
  import HiddenFromSSR from '../HiddenFromSSR.html'
  import DynamicPageBanner from '../DynamicPageBanner.html'
  import { updateProfileAndRelationship, clearProfileAndRelationship } from '../../_actions/accounts.js'
  import AccountProfile from './AccountProfile.html'
  import PinnedStatuses from '../timeline/PinnedStatuses.html'
  import { formatIntl } from '../../_utils/formatIntl.js'

  export default {
    oncreate () {
      const { accountId } = this.get()
      clearProfileAndRelationship()
      updateProfileAndRelationship(accountId)
    },
    store: () => store,
    computed: {
      profileName: ({ $currentAccountProfile }) => {
        return ($currentAccountProfile && ('@' + $currentAccountProfile.acct)) || ''
      },
      shortProfileName: ({ $currentAccountProfile }) => {
        return ($currentAccountProfile && ('@' + $currentAccountProfile.username)) || ''
      },
      accountName: ({ $currentAccountProfile }) => {
        return ($currentAccountProfile && ($currentAccountProfile.display_name || $currentAccountProfile.username)) || ''
      },
      timeline: ({ accountId, filter }) => (
        `account/${accountId}` + (filter ? `/${filter}` : '')
      ),
      ariaTitle: ({ accountName }) => (
        formatIntl('intl.profilePageForAccount', { account: accountName })
      )
    },
    components: {
      TimelinePage,
      FreeTextLayout,
      HiddenFromSSR,
      DynamicPageBanner,
      AccountProfile,
      PinnedStatuses
    }
  }
</script>