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

    <p>You can search once logged in to an instance.</p>
  </FreeTextLayout>
</HiddenFromSSR>
{/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'
  import Search from '.././_components/search/Search.html'

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