@props([
    'name',
    'label' => null,
    'placeholder' => null,
    'autocomplete' => 'off',
    'required' => false,
    'generate' => false,
    'generateAction' => 'generatePassword',
    'copy' => false,
])

@php
    $inputId = 'password_' . $name . '_' . uniqid();
@endphp

<div
    class="mb-3"
    x-data="{
        showPassword: false,
        copied: false,

        togglePassword() {
            this.showPassword = !this.showPassword;
        },

        async copyPassword() {
            const password = $wire.get('{{ $name }}');

            if (!password) {
                return;
            }

            try {
                await navigator.clipboard.writeText(password);

                this.copied = true;

                setTimeout(() => {
                    this.copied = false;
                }, 2000);

            } catch (error) {
                console.error('Unable to copy password.', error);
            }
        }
    }"
>

    {{-- ============================================================
         LABEL
    ============================================================= --}}
    @if($label)

        <label
            for="{{ $inputId }}"
            class="form-label"
        >

            {{ $label }}

            @if($required)
                <span class="text-danger">*</span>
            @endif

        </label>

    @endif


    {{-- ============================================================
         PASSWORD INPUT GROUP
    ============================================================= --}}
    <div class="input-group">

        <input
            id="{{ $inputId }}"
            type="password"
            name="{{ $name }}"
            placeholder="{{ $placeholder }}"
            autocomplete="{{ $autocomplete }}"

            x-bind:type="showPassword ? 'text' : 'password'"

            @if($required)
                required
            @endif

            {{ $attributes->merge([
                'class' => 'form-control',
            ]) }}
        >


        {{-- ========================================================
             SHOW / HIDE PASSWORD
        ========================================================= --}}
        <button
            type="button"
            class="btn btn-outline-secondary"

            @click="togglePassword()"

            :aria-label="
                showPassword
                    ? 'Hide password'
                    : 'Show password'
            "

            :title="
                showPassword
                    ? 'Hide password'
                    : 'Show password'
            "
        >

            <i
                class="fa"
                :class="
                    showPassword
                        ? 'fa-eye-slash'
                        : 'fa-eye'
                "
            ></i>

        </button>


        {{-- ========================================================
             GENERATE PASSWORD
        ========================================================= --}}
        @if($generate)

            <button
                type="button"
                class="btn btn-outline-primary"

                wire:click="{{ $generateAction }}"

                wire:loading.attr="disabled"
                wire:target="{{ $generateAction }}"

                title="Generate New Password"
                aria-label="Generate New Password"
            >

                <span
                    wire:loading.remove
                    wire:target="{{ $generateAction }}"
                >
                    <i class="fa fa-key"></i>
                </span>

                <span
                    wire:loading
                    wire:target="{{ $generateAction }}"
                >
                    <i class="fa fa-spinner fa-spin"></i>
                </span>

            </button>

        @endif

    </div>


    {{-- ============================================================
         COPY PASSWORD
    ============================================================= --}}
    @if($copy)

        <div
            class="mt-1"
            x-show="$wire.get('{{ $name }}')"
            x-cloak
        >

            <button
                type="button"
                class="btn btn-link btn-sm p-0 text-decoration-none"

                @click="copyPassword()"
            >

                <i
                    class="fa"
                    :class="
                        copied
                            ? 'fa-check text-success'
                            : 'fa-copy'
                    "
                ></i>

                <span
                    x-text="
                        copied
                            ? 'Copied'
                            : 'Copy password'
                    "
                ></span>

            </button>

        </div>

    @endif


    {{-- ============================================================
         VALIDATION ERROR
    ============================================================= --}}
    @error($name)

        <div class="text-danger small mt-1">
            {{ $message }}
        </div>

    @enderror

</div>