<script>
export default {
  props: {
    initialUnifiedFrameId: Number,
    unificationEntriesListRefreshKey: Number,
  },
  data() {
    return {
      gettext: window.gettext,
      canViewAssignment: has_permission("users.view_assignment")
    }
  },
  methods: {
    reset_list() {
      this.$emit('unifiedFrameSelected', null);
      setup_frames_list({
        table: this.$refs.framestable,
        unifiedFrameSelected: (unifiedFrameId) => {
          this.$emit('unifiedFrameSelected', unifiedFrameId);
        },
        selectEntryId: this.initialUnifiedFrameId,
      });
    }
  },
  watch: {
    unificationEntriesListRefreshKey() {
      // TODO: reload data and click in selected row
      // this.datatableObject.ajax.reload();
      setup_frames_list({
        table: this.$refs.framestable,
        unifiedFrameSelected: (unifiedFrameId) => {
          this.$emit('unifiedFrameSelected', unifiedFrameId);
        },
        selectEntryId: this.initialUnifiedFrameId,
      });
    }
  },
  emits: ['unifiedFrameSelected'],
  mounted() {
    this.$.appContext.config.globalProperties.$entries_list = this;
    setup_frames_list({
      table: this.$refs.framestable,
      unifiedFrameSelected: (unifiedFrameId) => {
        this.$emit('unifiedFrameSelected', unifiedFrameId);
      },
      selectEntryId: this.initialUnifiedFrameId,
    });
  },
};
</script>

<template>
  <table ref="framestable" class="table table-sm table-hover text-dark">
    <thead>
      <tr>
        <th class="p-1">{{ gettext('Rama') }}</th>
        <th class="p-1">{{ gettext('Status') }}</th>
        <th class="p-1">{{ gettext('Leksykograf') }}</th>
        <th class="p-1" hidden="true">{{ gettext('Id') }}</th>
      </tr>
    </thead>
    <tbody id="entries">
    </tbody>
  </table>
</template>