{#if $isUserLoggedIn}
<div class="community-page">

  <RadioGroup
    id="pinnables"
    length={numPinnable}
    label="Pinnable timelines">

    <h2 class="community-header">
      Timelines
    </h2>

    <PageList label="Timelines">
      <PageListItem href="/local"
                    label="Local Timeline"
                    icon="#fa-users"
                    pinnable="true"
                    pinIndex={0}
      />
      <PageListItem href="/federated"
                    label="Federated Timeline"
                    icon="#fa-globe"
                    pinnable="true"
                    pinIndex={1}
      />
      <PageListItem href="/favorites"
                    label="Favorites"
                    icon="#fa-star"
                    pinnable="true"
                    pinIndex={2}
      />
      <PageListItem href="/direct"
                    label="Direct messages"
                    icon="#fa-envelope"
                    pinnable="true"
                    pinIndex={3}
      />
    </PageList>

    {#if listsLength}

      <h2 class="community-header">
        Lists
      </h2>

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

    {/if}

  </RadioGroup>

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

  <PageList label="Instance settings">
    {#if isLockedAccount}
    <PageListItem href="/requests"
                  label={followRequestsLabel}
                  icon="#fa-user-plus"
     />
    {/if}
    <PageListItem href="/muted"
                  label="Muted users"
                  icon="#fa-volume-off"
    />
    <PageListItem href="/blocked"
                  label="Blocked users"
                  icon="#fa-ban"
    />
    <PageListItem href="/pinned"
                  label="Pinned toots"
                  icon="#fa-thumb-tack"
    />
  </PageList>

</div>
{:else}
<HiddenFromSSR>
  <FreeTextLayout>
    <h1>Community</h1>

    <p>Community options appear here when logged in.</p>
  </FreeTextLayout>
</HiddenFromSSR>
  <div style="display: none">
    <!-- TODO: this is just a hack so that `sapper export` knows to crawl these files -->
    <a href="/muted">Muted</a>
    <a href="/blocked">Blocked</a>
    <a href="/pinned">Pinned</a>
    <a href="/requests">Requests</a>
    <a href="/share">Share</a>
    <a href="/federated">Federated</a>
    <a href="/favorites">Favorites</a>
    <a href="/direct">Conversations</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'
  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'
  import { updateFollowRequestCountIfLockedAccount } from '../../_actions/followRequests'

  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
    },
    computed: {
      isLockedAccount: ({ $currentVerifyCredentials }) => $currentVerifyCredentials && $currentVerifyCredentials.locked,
      followRequestsLabel: ({ $hasFollowRequests, $numberOfFollowRequests }) => (
        `Follow requests${$hasFollowRequests ? ` (${$numberOfFollowRequests})` : ''}`
      ),
      listsLength: ({ $lists }) => $lists ? $lists.length : 0,
      numPinnable: ({ listsLength }) => listsLength + 4 // 4 because of local/federated/favs/direct
    }
  }
</script>