{#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="/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>