<script setup>
import { t } from '@/shared/i18n';

const props = defineProps(["df"]);
</script>

<template>
  <div class="control editable">
    <!-- label -->
    <div class="field-controls">
      <slot name="label" />
      <slot name="actions" />
    </div>

    <!-- table grid -->
    <div
      v-if="df.fieldtype === 'Table'"
      class="table-controls"
    >
      <div class="table-column" style="width: 10%">
        <div class="table-field ellipsis">
          {{ t("No.") }}
        </div>
      </div>
      <div class="table-column" style="width: 90%">
        <div class="table-field ellipsis">
          {{ df.options || t("Child Table") }}
        </div>
      </div>
    </div>
    <div class="grid-empty">
      {{ t("No Data") }}
    </div>

    <!-- description -->
    <div v-if="df.description" class="mt-2 description" v-html="df.description"></div>
  </div>
</template>

<style lang="scss" scoped>
.grid-empty {
  background-color: #fff;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  border: 1px solid #e5e7eb;
  border-top: none;
  padding: 40px;
  text-align: center;
  color: #9ca3af;
}

.table-controls {
  display: flex;

  .table-column {
    position: relative;

    .table-field {
      background-color: #f9fafb;
      border: 1px solid #e5e7eb;
      border-left: none;
      padding: 8px 10px;
      user-select: none;
      white-space: nowrap;
      overflow: hidden;
      font-size: 13px;
      font-weight: 500;
      color: #374151;
    }
    
    &:first-child .table-field {
      border-top-left-radius: 6px;
      border-left: 1px solid #e5e7eb;
    }
    
    &:last-child .table-field {
      border-top-right-radius: 6px;
    }
  }
}

.ellipsis {
  text-overflow: ellipsis;
  overflow: hidden;
}

.description {
  font-size: 12px;
  color: #6b7280;
}

.mt-2 {
  margin-top: 0.5rem;
}
</style>
