{#if pinnedStatuses.length }
  <h1 class="sr-only">{'intl.pinnedStatuses'}</h1>
  <div role="feed" aria-label="{'intl.pinnedStatuses'}" class="pinned-statuses">
    {#each pinnedStatuses as status, index (status.id)}
      <div class="pinned-status-wrapper">
        <!-- empty div used because we assume the parent of the <article> gets the focus outline -->
        <Status {status}
                timelineType="pinned"
                timelineValue={accountId}
                {index}
                length={pinnedStatuses.length}
                enableShortcuts={true}
        />
      </div>
    {/each}
  </div>
{/if}
<style>
  .pinned-status-wrapper:first-child {
    margin: 2px 0; /* gives room for the focus outline */
  }
</style>
<script>
  import { store } from '../../_store/store.js'
  import Status from '../status/Status.html'
  import { updatePinnedStatusesForAccount } from '../../_actions/pinnedStatuses.js'
  import { on } from '../../_utils/eventBus.ts'

  export default {
    async oncreate () {
      on('updatePinnedStatuses', this, () => this.updatePinnedStatuses())
      await this.updatePinnedStatuses()
    },
    computed: {
      pinnedStatuses: ({ $pinnedStatuses, $currentInstance, accountId }) => {
        return ($pinnedStatuses[$currentInstance] && $pinnedStatuses[$currentInstance][accountId]) || []
      }
    },
    store: () => store,
    components: {
      Status
    },
    methods: {
      async updatePinnedStatuses () {
        const { accountId } = this.get()
        await updatePinnedStatusesForAccount(accountId)
      }
    }
  }
</script>