<script>
export default {
  props: ['data'],
  computed: {
    termsDataDict: function() {
      let data = this.data.terms;
      let ret = Object({});
      for(let i = 0; i < data.length; i++) {
            if (!Array.isArray(ret[data[i].string1])) ret[data[i].string1] = []; 
            ret[data[i].string1].push(data[i]);         
      }
      return ret;
    }
  }  

}
</script>

<template>

<div class="border-b dark:border-slate-600 shadow-sm overflow-hidden my-8">
<div class="flex flex-col justify-center">
    <div class="overflow-x-auto sm:-mx-6 lg:-mx-8">
        <div class="inline-block py-2 min-w-full sm:px-6 lg:px-8">
            <div class="overflow-hidden shadow-md sm:rounded-lg flex justify-center">
                <table class="min-w-fit">
                    <thead class="bg-gray-100 dark:bg-gray-700">
                        <tr>
                            <th scope="col" class="py-3 px-6 text-xs font-medium tracking-wider text-left text-gray-700 uppercase dark:text-gray-400">
                                Výraz
                            </th>
                            <th scope="col" class="py-3 px-6 text-xs font-medium tracking-wider text-left text-gray-700 uppercase dark:text-gray-400">
                                Preklad
                            </th>
                            <th scope="col" class="py-3 px-6 text-xs font-medium tracking-wider text-left text-gray-700 uppercase dark:text-gray-400">
                                Člen
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(t, i) in data.terms" :key="i" 
							class="border-b odd:bg-white even:bg-gray-50 odd:dark:bg-gray-800 even:dark:bg-gray-700 dark:border-gray-600">
                            <td class="py-4 px-6 text-sm font-medium text-gray-900 whitespace-nowrap dark:text-white">
                                {{ t.string1 }}
                            </td>
                            <td class="py-4 px-6 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
                                {{ t.string2 }}
                            </td>
                            <td class="py-4 px-6 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
                                {{ t.member }}
                            </td>
                        </tr>

                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>		
</div>
<div class="border-b dark:border-slate-600 shadow-sm overflow-hidden my-8">
    <div class="text-lg grid place-items-center">
        Preklad
    </div>
</div>
<div v-for="(t, i) in termsDataDict" :key="i">
{{ i }}
    <div class="px-10">
    <span v-for="(tt, n) in t" :key="n" class="bg-white">
        {{ tt.string2 }},
    </span>
    </div>
</div> 
</template>