@props([
    'id'        => null,
    'name'      => 'color',
    'value'     => null,
    'palette'   => null,
    'required'  => false,
    'disabled'  => false,
])

@php
    $id = $id ?: 'color_'.Str::uuid();

    $paletteColors = is_array($palette) && count($palette)
        ? array_values(array_filter($palette, fn ($c) => is_hex_color($c)))
        : calendar_color_palette();

    // initial: old() -> explicit value -> palette-based default -> failsafe
    $initial = old($name, $value) ?: default_calendar_color();

    if (! is_hex_color($initial)) {
        $initial = calendar_color_failsafe();
    }
@endphp

<div class="colorpicker" data-colorpicker data-palette='@json($paletteColors)'>
    <input
        id="{{ $id }}"
        type="color"
        name="{{ $name }}"
        value="{{ $initial }}"
        @required($required)
        @disabled($disabled)
        data-colorpicker-color
    />
    <input
        type="text"
        inputmode="text"
        autocomplete="off"
        spellcheck="false"
        class="colorpicker__hex"
        value="{{ strtoupper($initial) }}"
        aria-label="{{ __('Hex color') }}"
        placeholder="#RRGGBB"
        @disabled($disabled)
        data-colorpicker-hex
    />
    <x-button
        variant="tertiary"
        class="colorpicker__random"
        :label="__('Random color')"
        :title="__('Random color')"
        data-colorpicker-random
    >
        <x-icon-d20 width="20" />
    </x-button>
</div>
