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

    <p>A user timeline will appear here when logged in.</p>
  </FreeTextLayout>
</HiddenFromSSR>
{{/if}}
<script>
  import LazyTimeline from '../../_components/timeline/LazyTimeline.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 } from '../../_actions/accounts'
  import AccountProfile from '../../_components/AccountProfile.html'
  import PinnedStatuses from '../../_components/timeline/PinnedStatuses.html'

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