<script setup lang="ts">
import { Icon } from '@iconify/vue';
defineProps<{
  title?: string;
  dense?: boolean;
  outlined?: boolean;
  readonly?: boolean;
  separator?: boolean;
  prefixId: string;
}>();

const fileEmployerDocument = defineModel<File | null>('fileEmployerDocument');
</script>

<template>
  <div class="row">
    <div class="col-md-3 col-12 app-text-muted">
      • {{ $t(`otherDocument`) }}
    </div>
    <div class="col-md-9 col-12 row q-col-gutter-md">
      <q-file
        :id="`${prefixId}-input-attchment`"
        :dense="dense"
        outlined
        :readonly="readonly"
        multiple
        append
        :label="$t('additionalEmployerDocument')"
        class="col-md-6 col-12"
        v-model="fileEmployerDocument"
      >
        <template v-slot:prepend>
          <Icon
            icon="material-symbols:attach-file"
            width="20px"
            style="color: var(--brand-1)"
          />
        </template>
      </q-file>
    </div>
  </div>

  <q-separator
    v-if="separator"
    class="col-12 q-mt-xl q-mb-md"
    style="padding-block: 0.5px"
  />
</template>

<style></style>
