<template>
  <q-input
    v-model="password"
    v-bind="$attrs"
    :bg-color="bgColor"
    :label="label || $t('common.terms.password')"
    :type="!seePassword ? 'password' : 'text'"
    :rules="rules"
  >
    <template #append>
      <q-icon
        :name="seePassword ? 'mdi-eye-off-outline' : 'mdi-eye-outline'"
        class="cursor-pointer q-ml-md"
        color="primary"
        @click="seePassword = !seePassword"
      />
    </template>
  </q-input>
</template>
<script setup>
const { bgColor, label, rules } = defineProps({
  bgColor: {
    type: String,
    default: "white",
  },

  label: {
    type: String,
    default: null,
  },

  rules: {
    type: Array,
    default: () => [],
  },
});

const password = defineModel();
const seePassword = defineModel("seePassword", { default: false });
</script>
