<template>
  <q-input
    v-model="password"
    v-bind="$attrs"
    :label="$t('common.terms.password')"
    :type="!seePassword ? 'password' : 'text'"
    :rules
    :error
    :error-message
  >
    <template #append>
      <q-icon
        :name="seePassword ? 'mdi-eye-off' : 'mdi-eye'"
        class="cursor-pointer q-ml-md"
        @click="seePassword = !seePassword"
      />
    </template>
  </q-input>
</template>
<script setup>
const { rules } = defineProps({
  rules: {
    type: Array,
    default: () => [],
  },
  error: {
    type: Boolean,
    default: false,
  },
  errorMessage: {
    type: String,
    default: "",
  },
});

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