<template>
  <VueTooltipster :showClosebutton="false">
    <h1 v-for="(lemma, index) in lemmas" :key="index">
      <span class="homograph">{{lemma.hgno ? String.fromCharCode(0x215f + lemma.hgno) : ''}}</span>
      {{lemma.lemma}}{{index+1 < lemmas.length ? ',' : ''}} </h1>
      <span class="word-classification">{{group_list}}</span>
    <div slot="content" class="tooltip">
      <div v-for="(lemma, index) in lemmas" :key="index">
        <h4>{{lemma.lemma}}</h4>
        <table v-for="(std, index) in lemma.standardisations"  :key="index">
          <tr>
            <th rowspan="2">{{std.tags ? std.tags.join(', ') : ''}}</th>
            <th v-for="(inflection, index) in std.inflection"  :key="index">{{inflection.tags.join(', ')}}</th>
          </tr>
          <tr>
            <td v-for="(inflection, index) in std.inflection"  :key="index">{{inflection.word_form}}</td>
          </tr>
        </table>
      </div>
    </div>
  </VueTooltipster>
</template>

<script>
import helpers from '../utils/helpers.js'
import VueTooltipster from './vue-tooltipster.vue'
import jQuery from 'jquery'
window.jQuery = jQuery

export default {
  name: 'Header',
  props: {
    lemmas: Array
  },
  computed: {
    group_list: function() {
      return helpers.group_list(this.lemmas)
    }
  },
  components: {
    VueTooltipster
  }
}
</script>

<style>
.word-classification {
  text-decoration: underline dashed;
}

h1 {
  display: inline;
}

.tooltip {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}

.tooltip table {
  border-collapse: collapse;
  margin: 10px;
}

.homograph {
  font-size: smaller;
  font-weight: normal;
}

.tooltip td, .tooltip th {
  border: solid;
  border-width: 1px;
  margin: 0px 0px 0px 0px;
  padding: 3px;
}
</style>