{#if $isUserLoggedIn}
  <TimelinePage timeline="account/{params.accountId}">
    <DynamicPageBanner title="" />
    {#if $currentAccountProfile && $currentVerifyCredentials}
    <AccountProfile account={$currentAccountProfile}
                    relationship={$currentAccountRelationship}
                    verifyCredentials={$currentVerifyCredentials}
    />
    {/if}
    <PinnedStatuses accountId={params.accountId} />
  </TimelinePage>
{:else}
  <HiddenFromSSR>
    <FreeTextLayout>
      <h1>Profile</h1>

      <p>A user timeline will appear here when logged in.</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'
  import DynamicPageBanner from '../../_components/DynamicPageBanner.html'
  import { updateProfileAndRelationship, clearProfileAndRelationship } from '../../_actions/accounts'
  import AccountProfile from '../../_components/profile/AccountProfile.html'
  import PinnedStatuses from '../../_components/timeline/PinnedStatuses.html'

  export default {
    oncreate () {
      let { params } = this.get()
      let { accountId } = params
      clearProfileAndRelationship()
      updateProfileAndRelationship(accountId)
    },
    store: () => store,
    computed: {
      profileName: ({ $currentAccountProfile }) => {
        return ($currentAccountProfile && ('@' + $currentAccountProfile.acct)) || ''
      },
      shortProfileName: ({ $currentAccountProfile }) => {
        return ($currentAccountProfile && ('@' + $currentAccountProfile.username)) || ''
      }
    },
    components: {
      TimelinePage,
      FreeTextLayout,
      HiddenFromSSR,
      DynamicPageBanner,
      AccountProfile,
      PinnedStatuses
    }
  }
</script>