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

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

<template>
  <div class="row">
    <div class="col-3 app-text-muted">• {{ $t(`otherDocument`) }}</div>
    <div class="col-9 row q-col-gutter-md">
      <q-file
        id="input-attchment"
        :dense="dense"
        :outlined="readonly ? false : outlined"
        :readonly="readonly"
        :borderless="readonly"
        multiple
        append
        :label="$t('additionalEmployerDocument')"
        class="col-6"
        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>
