<template>
  <v-text-field
    id="_password"
    v-model="password"
    :type="showPassword ? 'text' : 'password'"
    :append-inner-icon="showPassword ? 'mdi-eye-off' : 'mdi-eye'"
    v-bind="$attrs"
    autocomplete="off"
    @click:append-inner="togglePasswordVisibility"
  />
</template>

<script setup lang="ts">
// Define the props for the v-model
const password = defineModel({ default: "" });

// Control password visibility
const showPassword = ref(false);
const togglePasswordVisibility = () => {
  showPassword.value = !showPassword.value;
};
</script>
