<template>
  <div class="ivyforms-advanced-mode-controls__section ivyforms-pb-16 ivyforms-pr-8">
    <div
      class="ivyforms-advanced-field ivyforms-flex ivyforms-align-items-center ivyforms-justify-content-between ivyforms-mb-16 ivyforms-gap-16"
    >
      <label class="ivyforms-advanced-label ivyforms-flex-shrink-0">{{
        getLabel('copy_css_class')
      }}</label>
      <div
        class="ivyforms-mixed-input-field ivyforms-css-class-copy ivyforms-flex ivyforms-align-items-center ivyforms-gap-8"
      >
        <IvyTextInput
          :model-value="copiedFormCssClass"
          secondary
          readonly
          class="ivyforms-width-100"
          icon-end="copy"
          icon-end-size="s"
          @icon-end-click="emit('copyCssClass')"
        />
      </div>
    </div>

    <div
      class="ivyforms-advanced-field ivyforms-flex ivyforms-align-items-center ivyforms-justify-content-between ivyforms-mb-16 ivyforms-gap-16"
    >
      <label class="ivyforms-advanced-label ivyforms-flex-shrink-0">{{
        getLabel('additional_css_classes')
      }}</label>
      <IvyTextInput
        :model-value="additionalCssClasses"
        secondary
        class="ivyforms-mixed-input-field"
        :placeholder="getLabel('additional_css_classes_placeholder')"
        @update:model-value="emit('update:additionalCssClasses', String($event || ''))"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { useLabels } from '@/composables/useLabels'
import IvyTextInput from '@/views/_components/input/IvyTextInput.vue'

const { getLabel } = useLabels()

defineProps<{
  copiedFormCssClass: string
  additionalCssClasses: string
}>()

const emit = defineEmits<{
  'update:additionalCssClasses': [value: string]
  copyCssClass: []
}>()
</script>

<style scoped lang="scss">
.ivyforms-css-class-copy {
  :deep(.ivyforms-input input[readonly]) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
</style>
