{#if $isUserLoggedIn}
<h1 class="sr-only">{'intl.search'}</h1>
<div class="search-page">
  <Search></Search>
</div>
{:else}
<HiddenFromSSR>
  <FreeTextLayout>
    <h1>{'intl.search'}</h1>

    <p>{'intl.searchNotLoggedIn'}</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 community/index.html -->
  <a href="/local">{'intl.local'}</a>
  <a href="/bubble">{'intl.bubble'}</a>
  <a href="/federated">{'intl.federated'}</a>
  <a href="/favorites">{'intl.favorites'}</a>
  <a href="/direct">{'intl.directMessages'}</a>
  <a href="/bookmarks">{'intl.bookmarks'}</a>
</div>
{/if}
<style>
  .search-page {
    padding: 20px 20px;
  }

  @media (max-width: 767px) {
    .search-page {
      padding: 20px 10px;
    }
  }
</style>
<script>
  import FreeTextLayout from '../_components/FreeTextLayout.html'
  import { store } from '../_store/store.js'
  import HiddenFromSSR from '../_components/HiddenFromSSR.html'
  import Search from '../_components/search/Search.html'

  export default {
    store: () => store,
    components: {
      Search,
      FreeTextLayout,
      HiddenFromSSR
    }
  }
</script>