<script setup>
import { useSlots } from "vue";

const props = defineProps(["df", "value", "read_only"]);
let slots = useSlots();
</script>

<template>
  <div class="control form-builder-control checkbox" :class="{ editable: slots.label }">
    <!-- checkbox -->
    <label v-if="slots.label" class="field-controls">
      <div class="checkbox">
        <input type="checkbox" disabled />
        <slot name="label" />
      </div>
      <slot name="actions" />
    </label>
    <label v-else class="checkbox-label">
      <input
        type="checkbox"
        :checked="value"
        :disabled="read_only"
        @change="(event) => $emit('update:modelValue', event.target.checked)"
      />
      <span class="label-area" :class="{ reqd: df.reqd }">{{ df.label }}</span>
    </label>

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

<style lang="scss" scoped>
.control.checkbox {
  label,
  input {
    margin-bottom: 0 !important;
    cursor: pointer;
  }

  .checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    
    input[type="checkbox"] {
      width: 16px;
      height: 16px;
      cursor: pointer;
    }
    
    .label-area {
      font-size: 14px;
      color: #374151;
      
      &.reqd::after {
        content: " *";
        color: #ef4444;
      }
    }
  }

  label .checkbox {
    display: flex;
    align-items: center;

    input {
      background-color: #fff;
      box-shadow: none;
      border: 1px solid #9ca3af;
      pointer-events: none;
      width: 16px;
      height: 16px;
      margin-right: 8px;
    }
  }
  
  .description {
    font-size: 12px;
    color: #6b7280;
  }
}

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