@extends('layouts.app')
@section('title', 'Theme · Settings')
@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('settings.index') }}">Settings</a></li>
    <li class="breadcrumb-item active" aria-current="page">Theme</li>
@endsection

@section('content')
    <x-layout.page-header title="Theme" subtitle="Personal appearance and company defaults." icon="palette2" />
    @include('pages.settings._tabs', ['active' => 'theme'])

    <div class="row g-3">
        <div class="col-lg-6">
            <x-ui.card title="Your preference" subtitle="Applies only to your account.">
                <form method="POST" action="{{ route('settings.theme.update') }}" class="settings-form">
                    @csrf
                    @method('PUT')
                    <input type="hidden" name="scope" value="user">

                    <x-form.radio name="mode" label="Mode"
                        :options="['light' => 'Light', 'dark' => 'Dark', 'auto' => 'Follow system']"
                        :value="auth()->user()->theme ?? 'light'" />

                    <x-form.radio name="density" label="Density"
                        :options="['comfortable' => 'Comfortable', 'compact' => 'Compact']"
                        :value="auth()->user()->density ?? 'comfortable'" />

                    <div class="d-flex justify-content-end mt-3">
                        <x-ui.button type="submit" variant="primary">Save personal theme</x-ui.button>
                    </div>
                </form>
            </x-ui.card>
        </div>

        <div class="col-lg-6">
            <x-ui.card title="Company default" subtitle="Applied for users who haven't set a personal theme.">
                @can('update', $company)
                    <form method="POST" action="{{ route('settings.theme.update') }}" class="settings-form">
                        @csrf
                        @method('PUT')
                        <input type="hidden" name="scope" value="company">

                        <x-form.radio name="mode" label="Default mode"
                            :options="['light' => 'Light', 'dark' => 'Dark']"
                            :value="$company->meta['theme']['mode'] ?? 'light'" />

                        <x-form.radio name="density" label="Default density"
                            :options="['comfortable' => 'Comfortable', 'compact' => 'Compact']"
                            :value="$company->meta['theme']['density'] ?? 'comfortable'" />

                        <x-form.input name="brand_color" type="color" label="Brand color"
                            :value="$company->brand_color" />

                        <div class="d-flex justify-content-end mt-3">
                            <x-ui.button type="submit" variant="primary">Save company theme</x-ui.button>
                        </div>
                    </form>
                @else
                    <x-ui.alert tone="info" icon="info-circle">
                        Only administrators can change the company-wide theme.
                    </x-ui.alert>
                @endcan
            </x-ui.card>
        </div>
    </div>
@endsection