<template>
  <section id="search_results">
    <div class="flex-container">
      <ul class="hits" v-if="results_bob.length">
        <li  class="article_container" v-for="(result, index) in results_bob" :key="index + results_hash">
          <Article  :article="result" @article-click="article_link_click">
          </Article>
        </li>
      </ul>
      <ul class="hits" v-if="results_nob.length">
        <li class="article_container" v-for="(result, index) in results_nob" :key="index + results_hash">
          <Article :article="result" @article-click="article_link_click">
          </Article>
        </li>
      </ul>
    </div>
  </section>
</template>

<script>
import Article from './Article.vue'

export default {
  name: 'SearchResults',
  props: {
    hits: Array,
    lang: String
  },
  computed: {
    results_bob: function(){
      return this.hits.filter(hit => hit.dictionary == 'bob')
    },
    results_nob: function(){
      return this.hits.filter(hit => hit.dictionary == 'nob')
    },
    results_hash: function(){
      return this.hits.reduce((hash, hit) => (hash + hit) % 10000)
    }
  },
  methods: {
    article_link_click: function(item) {
      this.$emit('article-click', item)
    }
  },
  components: {
    Article
  }
}

</script>
<style >
  h2 {
    color: #560027;
    margin: 0px;
    padding: 20px 0px 20px 0px;
  }

  .hits {
    margin-top:0px;
  }

  .flex-container {
    display: flex;
  }

  .flex-container > ul {
    padding: 0px !important;
  }

  .flex-container  h4 {
    margin: 0px;
    color: #560027;
  }
</style>