@props([
    'name' => 'template',
    'value' => null,
    'errorsBag' => null,
    'showErrorSpace' => true,
    'options' => [], // wajib: array of template
])

@php
    $bag = $errorsBag ?? $errors ?? session('errors');
    $hasError = $bag && $bag->has($name);
@endphp

<div class="fluent-input-wrapper">

    <div class="fluent-template-picker grid grid-3 gap-sm {{ $hasError ? 'is-invalid' : '' }}">

        @foreach($options as $key => $item)
            <label class="fluent-template-option cursor-pointer position-relative">

                {{-- RADIO --}}
                <input 
                    type="radio"
                    name="{{ $name }}"
                    value="{{ $key }}"
                    class="fluent-template-input d-none"
                    {{ $value == $key ? 'checked' : '' }}
                >

                {{-- CARD --}}
                <x-fluent-card 
                    class="fluent-template-card"
                    :title="$item['title'] ?? null"
                    :subtitle="$item['subtitle'] ?? null"
                    compact
                    hover
                >
                    <x-slot:body>
                        @if(isset($item['preview']))
                            <div class="fluent-template-preview">
                                {!! $item['preview'] !!}
                            </div>
                        @endif
                    </x-slot>
                </x-fluent-card>

                {{-- CHECK ICON --}}
                <div class="fluent-template-check position-absolute">
                    <x-fluent-icon name="checkmark_circle" variant="filled" />
                </div>

            </label>
        @endforeach

    </div>

    {{-- FLUENT ERROR MESSAGE --}}
    @if($showErrorSpace)
        <div class="fluent-input-error">
            @if($hasError)
                @foreach($bag->get($name) as $message)
                    <div class="fluent-input-error-item">
                        <x-fluent-icon name="warning" class="text-danger" size="sm" />
                        <span>{{ $message }}</span>
                    </div>
                @endforeach
            @endif
        </div>
    @endif
</div>