{{-- A password field, with M3's trailing eye to show what was typed.

     The eye flips the control's `type` and nothing else, so the value never leaves the field and a
     password manager still sees a password input on load. Its label says what pressing it will do —
     M3's own pattern for an interactive trailing icon ("Show password" / "Hide password") — and it
     carries no `aria-pressed`, which would say the state a second time and the other way round.
     `label`, `hint`, `icon`, `variant`, `size`; `full` takes the 40rem bound off a field its container already bounds. `class` and `style` land on the field's root, every
     other attribute reaches the `<input>`
     (`autocomplete="current-password"`, `wire:model`). The field's root carries
     `data-md-password`; the chrome and the eye's icon button are the field's
     (resources/css/components/field.css, brought by resources/css/components/password.css). --}}

@props([
    'label' => null,
    'hint' => null,
    'hintClass' => null,
    'icon' => null,
    'size' => 'md',
    'variant' => null,
    'full' => false,
])

@php
    $model = $attributes->whereStartsWith('wire:model')->first();
    $id = $attributes->get('id') ?? 'field-'.substr(md5($model.'|'.$label.'|password'), 0, 12);
    $field = \NoNameWeb\LivewireMaterial\Support\Field::class;
    $errorKey = $field::key($model, $attributes->get('name'));
    $messages = $field::messages($errors ?? null, $errorKey);
    $fieldIconSize = ['sm' => 20, 'xs' => 16][$size] ?? 24;
@endphp

<x-livewire-material::field :$id :$label :$hint :hint-class="$hintClass" :$messages :$icon :$size :$variant :$full :class="$attributes->get('class')" :style="$attributes->get('style')" x-data="{ shown: false }" data-md-password>
    <input
        {{ $attributes->except(['class', 'style', 'id', 'type', 'placeholder']) }}
        id="{{ $id }}"
        type="password"
        x-bind:type="shown ? 'text' : 'password'"
        placeholder="{{ filled($attributes->get('placeholder')) ? $attributes->get('placeholder') : ' ' }}"
        @if ($messages !== []) aria-invalid="true" @endif
        @if ($messages !== [] || filled($hint)) aria-describedby="{{ $id }}-support" @endif
        data-md-field-control
    />

    <x-slot:trailing>
        <button
            type="button"
            x-on:click="shown = ! shown"
            x-bind:aria-label="shown ? @js(__('Hide password')) : @js(__('Show password'))"
            aria-label="{{ __('Show password') }}"
            data-md-field-trailing
            data-md-field-button
            data-md-field-reveal
        >
            <x-livewire-material::icon name="visibility" :size="$fieldIconSize" x-show="! shown" />
            <x-livewire-material::icon name="visibility_off" :size="$fieldIconSize" x-show="shown" x-cloak />
        </button>
    </x-slot:trailing>
</x-livewire-material::field>