<template>
  <div class="">
    <h2 v-if="hits.length">Søkeresultater</h2>
    <ul>
      <li v-for="result in extended_results">
        <a :href="result.id">{{result.label}}</a> ({{result.classification}})
      </li>
    </ul>
  </div>
</template>

<script>
import helpers from '../utils/helpers.js'
export default {
  name: 'SearchResults',
  props: {
    hits: Array
  },
  computed: {
    extended_results: function(){
      return this.hits.map(
        function(hit){
          return {
              id: hit._id,
              label: hit._source.lemmas.map(x => x.word).join(', '),
              article: hit._source,
              classification: helpers.group_list(hit._source.lemmas)
          }
      })
    }
  }
}

</script>