@props(['theme'])

<section class="card border-0 shadow-sm theme-settings" aria-labelledby="theme-settings-title">
    <div class="card-header">
        <div>
            <span class="theme-settings__eyebrow">Aspetto</span>
            <h2 class="h5 mb-0" id="theme-settings-title">Tema dell’interfaccia</h2>
        </div>
        <span class="theme-settings__status">
            <x-icon :name="$theme === 'light' ? 'sun' : 'moon'" />
            {{ $theme === 'light' ? 'LIGHT' : 'DARK' }}
        </span>
    </div>
    <div class="card-body">
        <p class="text-body-secondary mb-3">Scegli la modalità visiva. La preferenza viene salvata nel tuo profilo.</p>
        <form method="POST" action="{{ route('theme.update') }}">
            @csrf
            @method('PUT')
            <div class="theme-picker">
                <label class="theme-option">
                    <input type="radio" name="theme" value="dark" @checked(old('theme', $theme) === 'dark')>
                    <span class="theme-option__preview theme-option__preview--dark" aria-hidden="true">
                        <span></span><span></span><span></span>
                    </span>
                    <span class="theme-option__copy">
                        <strong>DARK</strong>
                        <small>Scuro, intenso e ad alto contrasto</small>
                    </span>
                    <span class="theme-option__check"><x-icon name="check" /></span>
                </label>
                <label class="theme-option">
                    <input type="radio" name="theme" value="light" @checked(old('theme', $theme) === 'light')>
                    <span class="theme-option__preview theme-option__preview--light" aria-hidden="true">
                        <span></span><span></span><span></span>
                    </span>
                    <span class="theme-option__copy">
                        <strong>LIGHT</strong>
                        <small>Chiaro, pulito e luminoso</small>
                    </span>
                    <span class="theme-option__check"><x-icon name="check" /></span>
                </label>
            </div>
            @error('theme')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
            <div class="d-flex justify-content-end mt-3">
                <button class="btn btn-primary" type="submit">Applica tema</button>
            </div>
        </form>
    </div>
</section>