@php
    $name = $name ?? 'password';
    $id = $id ?? 'f-'.$name;
    $label = $label ?? 'Password';
    $autocomplete = $autocomplete ?? 'current-password';
    $strength = $strength ?? false;
    $err = $errors->first($name);
@endphp
<div class="field">
    <label class="label" for="{{ $id }}">{{ $label }} <span class="req">*</span></label>
    <div class="tr-pw">
        <input class="input {{ $err ? 'is-invalid' : '' }}" type="password" id="{{ $id }}" name="{{ $name }}" required autocomplete="{{ $autocomplete }}" @if($strength) data-pw-strength="#{{ $id }}-meter" aria-describedby="{{ $id }}-meter" @endif>
        <button type="button" class="tr-pw-toggle" data-toggle-password="#{{ $id }}" aria-pressed="false" aria-label="Show or hide {{ strtolower($label) }}"><x-icon name="eye" :size="18"/></button>
    </div>
    @if($strength)
    <div class="tr-meter" id="{{ $id }}-meter" data-score="0">
        <div class="tr-meter-bar" aria-hidden="true"><i></i><i></i><i></i><i></i></div>
        <div class="tr-meter-text small" aria-live="polite"><span data-pw-label>Use at least 8 characters with letters and numbers.</span></div>
        <ul class="tr-rules xs">
            <li data-rule="len"><x-icon name="check" :size="12"/> 8+ characters</li>
            <li data-rule="letter"><x-icon name="check" :size="12"/> A letter</li>
            <li data-rule="number"><x-icon name="check" :size="12"/> A number</li>
            <li data-rule="mix"><x-icon name="check" :size="12"/> Upper and lower case</li>
        </ul>
    </div>
    @endif
    @if($err)<div class="field-error">{{ $err }}</div>@endif
</div>