<script setup>
import EditableTableColumn from "@/components/displays/buttons/EditableTableColumn.vue";
import { loadList } from "@/components/pagination/paginatedList.vue";
const props = defineProps({
  objects: {
    type: Array,
    required: true,
  },
});
import { SessionUser } from "@/components/session/token/SessionUser.vue";
import { ref } from 'vue';
import ActionSettingsWheelButton from "@/components/displays/buttons/ActionSettingsWheelButton.vue";
import ActionSettingsWheelItem from "@/components/displays/buttons/ActionSettingsWheelItem.vue";
import RequiresPermission from "@/components/displays/permissionbased/RequiresPermission.vue";

const su_object = SessionUser.objects.department_notification_sms;

const hasUpdatePermission = () => {
  return (SessionUser.hasPermission('department_notification_sms_update') || SessionUser.canAccessSuperUser());
};
</script>

<template>
  <table class="table is-fullwidth">
    <thead>
    <tr>
      <th>{{su_object.columns.id.label}}</th>
      <th>{{su_object.columns.label.label}}</th>
      <th>{{su_object.columns.phone_country_code.label}}</th>
      <th>{{su_object.columns.phone.label}}</th>
      <th>{{su_object.columns.enabled.label}}</th>
      <th class="has-text-right"></th>
    </tr>
    </thead>
    <tbody>
    <tr v-for="obj in objects" :key="obj.id">
      <td>{{obj.id}}</td>
      <!-- Label -->
      <EditableTableColumn
          :object="obj"
          :loadList="loadList"
          :editFunction="su_object.showEditObjectFieldForm"
          column="label"
          :permission-check-function="hasUpdatePermission"
      />
      <!-- Phone country code -->
      <EditableTableColumn
          :object="obj"
          :loadList="loadList"
          :editFunction="su_object.showEditObjectFieldForm"
          column="phone_country_code"
          :permission-check-function="hasUpdatePermission"
      />
      <!-- Phone -->
      <EditableTableColumn
          :object="obj"
          :loadList="loadList"
          :editFunction="su_object.showEditObjectFieldForm"
          column="phone"
          :permission-check-function="hasUpdatePermission"
      />
      <!-- Enabled -->
      <EditableTableColumn
          :object="obj"
          :loadList="loadList"
          :editFunction="su_object.showEditObjectFieldForm"
          column="enabled"
          :parse-function="(value) => {
            return value ? SessionUser.objects.global.language.yes : SessionUser.objects.global.language.no;
          }"
          :permission-check-function="hasUpdatePermission"
      />
      <!-- Actions -->
      <td class="is-float-right">
      <ActionSettingsWheelButton>
        <template #actions>
          <RequiresPermission :permission="'department_notification_sms_delete'">
            <template #default>
              <ActionSettingsWheelItem
                  @click="su_object.functions.showDeleteObjectForm(obj.id, loadList)"
                  :icon="SessionUser.objects.global.icons.delete"
                  :label="SessionUser.objects.global.language.delete"
                  template="danger"
              />
            </template>
            <template #fail>
              <ActionSettingsWheelItem
                  :icon="SessionUser.objects.global.icons.delete"
                  :label="SessionUser.objects.global.language.delete"
                  template="danger"
                  disabled
              />
            </template>
          </RequiresPermission>
        </template>
      </ActionSettingsWheelButton>
      </td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
      <td colspan="12">{{SessionUser.objects.global.language.showing}} {{ objects.length }} {{SessionUser.objects.department_notification_sms.meta.labels.multiple}}</td>
    </tr>
    </tfoot>
  </table>
</template>

<style scoped>

</style>