{% set req = required is defined and required ? 'required' : '' %}
<div class="form-floating mb-3 position-relative" x-data="{show:false}">
    <input :type="show ? 'text' : 'password'" class="form-control" id="{{ id }}" name="{{ name }}" placeholder="{{ placeholder }}" {{ req }}>
    <label for="{{ id }}">{{ label }}</label>
    <button type="button" class="btn btn-outline-secondary btn-sm position-absolute top-50 end-0 translate-middle-y me-2" @click="show = !show" aria-label="Toggle password visibility">
        <i :class="show ? 'bi bi-eye-slash' : 'bi bi-eye'"></i>
    </button>
</div>