{#if $isUserLoggedIn}
<h1 class="sr-only">{'intl.community'}</h1>
<div class="community-page">
  <FocusRestoration realm="community">
    <RadioGroup
      id="pinnables"
      length={numPinnable}
      label="{'intl.pinnableTimelines'}">

      <h2 class="community-header">
        {'intl.timelines'}
      </h2>

      <PageList label="{'intl.timelines'}">
        {#each staticPinnables as staticPinnable, i}
          <PageListItem href={staticPinnable.href}
                        label={staticPinnable.label}
                        icon={staticPinnable.icon}
                        pinnable="true"
                        pinIndex={i}
          />
        {/each}
      </PageList>

      {#if listsLength}

        <h2 class="community-header">
          {'intl.lists'}
        </h2>

        <PageList label="{'intl.lists'}">
          {#each $lists as list, i}
            <PageListItem href="/lists/{list.id}"
                          label={list.title}
                          icon="#fa-bars"
                          pinnable="true"
                          pinIndex={staticPinnablesLength + i}
            />
          {/each}
        </PageList>

      {/if}

    </RadioGroup>

    <h2 class="community-header">
      Instance settings
    </h2>

    <PageList label="{'intl.instanceSettings'}">
      {#if isLockedAccount}
      <PageListItem href="/requests"
                    label={followRequestsLabel}
                    icon="#fa-user-plus"
       />
      {/if}
      <PageListItem href="/muted"
                    label="{'intl.mutedUsers'}"
                    icon="#fa-volume-off"
      />
      <PageListItem href="/blocked"
                    label="{'intl.blockedUsers'}"
                    icon="#fa-ban"
      />
      <PageListItem href="/pinned"
                    label="{'intl.pinnedStatuses'}"
                    icon="#fa-thumb-tack"
      />
    </PageList>

  </FocusRestoration>
</div>
{:else}
<HiddenFromSSR>
  <FreeTextLayout>
    <h1>{'intl.community'}</h1>

    <p>{'intl.communityNotLoggedIn'}</p>
  </FreeTextLayout>
</HiddenFromSSR>
<div style="display: none">
  <!-- TODO: this is just a hack so that `sapper export` knows to crawl these files -->
  <!-- Note that these links have to be spread out or else they result in ECONNRESET errors during crawling -->
  <!-- See also search.html -->
  <a href="/requests">{'intl.followRequests'}</a>
  <a href="/muted">{'intl.mutedUsers'}</a>
  <a href="/blocked">{'intl.blockedUsers'}</a>
  <a href="/pinned">{'intl.pinnedStatuses'}</a>
</div>
{/if}
<style>
  .community-page {
    margin: 20px;
  }
  @media (max-width: 767px) {
    .community-page {
      margin: 20px 10px;
    }
  }
</style>
<script>
  import FreeTextLayout from '../../_components/FreeTextLayout.html'
  import { store } from '../../_store/store.js'
  import HiddenFromSSR from '../../_components/HiddenFromSSR.html'
  import PageList from '../../_components/community/PageList.html'
  import PageListItem from '../../_components/community/PageListItem.html'
  import RadioGroup from '../../_components/radio/RadioGroup.html'
  import { updateListsForInstance } from '../../_actions/lists.js'
  import { updateFollowRequestCountIfLockedAccount } from '../../_actions/followRequests.js'
  import FocusRestoration from '../../_components/FocusRestoration.html'
  import { formatIntl } from '../../_utils/formatIntl.js'

  export default {
    async oncreate () {
      const { currentInstance } = this.store.get()
      if (currentInstance) {
        await Promise.all([
          updateListsForInstance(currentInstance),
          updateFollowRequestCountIfLockedAccount(currentInstance)
        ])
      }
    },
    store: () => store,
    components: {
      FreeTextLayout,
      HiddenFromSSR,
      PageList,
      PageListItem,
      RadioGroup,
      FocusRestoration
    },
    data: () => ({
    }),
    computed: {
      isLockedAccount: ({ $currentVerifyCredentials }) => $currentVerifyCredentials && $currentVerifyCredentials.locked,
      followRequestsLabel: ({ $hasFollowRequests, $numberOfFollowRequests }) => (
        formatIntl('intl.followRequestsLabel', {
          hasFollowRequests: $hasFollowRequests,
          count: $numberOfFollowRequests
        })
      ),
      listsLength: ({ $lists }) => $lists ? $lists.length : 0,
      staticPinnablesLength: ({ staticPinnables }) => staticPinnables.length,
      numPinnable: ({ listsLength, staticPinnablesLength }) => listsLength + staticPinnablesLength,
      staticPinnables: ({ $bubbleTimelineEnabled }) => [
        {
          href: '/local',
          label: 'intl.localTimeline',
          icon: '#fa-users'
        },
        ...($bubbleTimelineEnabled
          ? [{
              href: '/bubble',
              label: 'intl.bubbleTimeline',
              icon: '#fa-circle'
            }]
          : []),
        {
          href: '/federated',
          label: 'intl.federatedTimeline',
          icon: '#fa-globe'
        },
        {
          href: '/favorites',
          label: 'intl.favorites',
          icon: '#fa-star'
        },
        {
          href: '/direct',
          label: 'intl.directMessages',
          icon: '#fa-envelope'
        },
        {
          href: '/bookmarks',
          label: 'intl.bookmarks',
          icon: '#fa-bookmark'
        }
      ]
    }
  }
</script>