<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-md-3 col-12 app-text-muted">• {{ title }}</div>
  <div
    :class="{
      'dark-form-show-img-qh': $q.dark.isActive,
      'q-mt-lg': !$q.screen.xs,
      'q-mt-sm': $q.screen.xs,
    }"
    class="col-md-9 col-12 row 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">
        <template #error>
          <div
            style="background: none"
            class="full-width full-height items-center justify-center flex"
          >
            <q-img src="/no-data.png" width="5rem" />
          </div>
        </template>
      </q-img>
    </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>
