<script setup lang="ts">
const image = defineModel<string | null>('image');

defineProps<{
  title?: string;
  dense?: boolean;
  outlined?: boolean;
  readonly: boolean;
  separator?: boolean;
}>();

defineEmits<{
  (e: 'upload'): void;
}>();
</script>
<template>
  <div class="col-3 app-text-muted">• {{ title }}</div>
  <div
    :class="{ 'dark-form-show-img-qh': $q.dark.isActive }"
    class="col-9 row q-mt-lg branch-form-show-img-hq"
    style="min-height: 150px"
  >
    <div class="col-12 flex flex-center" v-if="image">
      <q-img :src="image as string" style="width: 150px; height: 150px" />
    </div>
    <div class="col-12 flex flex-center q-py-md" v-if="!readonly">
      <q-btn
        :text-color="$q.dark.isActive ? 'black' : 'white'"
        style="background: var(--blue-5); color: var(--blue-0); font-size: 12px"
        unelevated
        rounded
        :label="$t('formDialogBtnImg')"
        @click="$emit('upload')"
        id="btn-image-upload"
      />
    </div>
  </div>
  <q-separator
    v-if="separator"
    class="col-12 q-mt-xl q-mb-md"
    style="padding-block: 0.5px"
  />
</template>

<style scoped>
.branch-form-show-img-hq {
  --_border-branch-form-show-img-hq: 2px solid var(--gray-4);
  border: var(--_border-branch-form-show-img-hq);
  border-radius: 10px;
  background: var(--surface-3);
  &.dark-form-show-img-qh {
    background: var(--gray-9);
    border-radius: 10px;
    border: none;
  }
}
.branch-form-btn-img-hq {
  --_color-btn-qr-code: 3px solid var(--gray-4);
  border: var(--_color-btn-qr-code);
  border-radius: 6px;
  &.dark-form-btn-qr-code {
    border: none;
  }
}
.branch-form-input-Contact {
  --_bg-branch-form-input-Contact: var(--gray-1-hsl);
  background: hsl(var(--_bg-branch-form-input-Contact));
  &.dark-form-input-Contact {
    --_bg-branch-form-input-Contact: var(--gray-10-hsl);
    border: 2px solid var(--gray-9);
  }
}
</style>
