<style>

#search-searchbar{
  width: 100%;
  text-align: center;
  margin-top: 20px;
}

.ais-search-box {
margin-top: 15px;
margin-bottom: 15px;

}

.ais-hits–item{

   float:left;
}
#search-container{
    width: 100%;
}

</style>

<script>
/* Instanciating InstantSearch.js with Algolia credentials */
const search = instantsearch({
  appId: '{{ site.algolia.application_id }}',
  indexName: '{{ site.algolia.index_name }}',
  apiKey: '{{ site.algolia.search_only_api_key }}'
});

search.addWidget(
  instantsearch.widgets.searchBox({
    container: '#search-searchbar',
    placeholder: 'Search into posts...',
    poweredBy: true
  })
);

search.addWidget(
  instantsearch.widgets.hits({
    container: '#search-hits',
    templates: {
      item: function(hit) {
        return `
                    <div class="card blog-post">
                        <img class="card-img-top" src="${ hit.thumbnail }" alt="${ hit.title }">
                        <div class="card-body center">
                            <img src="/assets/img/{{ site.author_logo }}" class="author-profile-img">
                            <h4 class="card-title">${ hit.title }</h4>

                            <h6 class="card-subtitle mb-2 text-muted">${moment.unix(hit.date).format('MMM D, YYYY')}</h6>
                            <p class="card-text">${hit.summary }</p>

                            <a href="${hit.url}" data-disqus-identifier="${hit.url}" class="btn btn-primary btn-sm">Read</a>
                            <span class="disqus-comment-count" data-disqus-identifier="${ hit.url }"></span>

                        </div>
                    </div>
        `;
      }
    }
  })
);

search.start();

</script>