<template>
  <loader class="page-translations-overview" :is-loading="isLoadingPages">
    <portal to="top-header-left">
      <search v-model="searchInput" />
    </portal>
    <nested-page-table item-component="page-translations-overview-item" :search="searchInput">
      <template v-slot:header>
        <div class="language" v-for="language in allLanguages" :key="language.key">{{ language.key }}</div>
      </template>
    </nested-page-table>
  </loader>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import { namespace } from 'vuex-class';

import Loader from '../loader.vue';
import Search from '../search.vue';
import NestedPageTable from '../../pages/nested-page-table.vue';
import { Page } from '../../types/api';
import { SupportedLanguage } from '../../types/language';

const PageStore = namespace('pages');
const LanguageStore = namespace('languages');

@Component({
  name: 'PageTranslationsOverview',
  components: {
    Loader,
    Search,
    NestedPageTable
  }
})
export default class PageTranslationsOverview extends Vue {
  searchInput = '';

  @PageStore.State('isLoadingPages') readonly isLoadingPages!: Page[];
  @LanguageStore.State('all') allLanguages!: SupportedLanguage[];
}
</script>

<style lang="scss" scoped>
::v-deep .page-table-heading-item {
  flex-grow: 1;
}

.language {
  padding: .5rem;
  flex: 0 0 50px;
  text-transform: uppercase;
}
</style>
