{{-- Presentation settings shared by every block, stored in website_blocks.style. --}}
<div class="space-y-4">
    <div class="flex flex-col gap-1.5">
        <label for="st-bg" class="text-sm font-medium">{{ __('نوع الخلفية') }}</label>
        <select id="st-bg" wire:model.live="styleForm.bg_type" class="w-full rounded-lg border px-3 py-2 text-sm">
            <option value="none">{{ __('بدون') }}</option>
            <option value="solid">{{ __('لون') }}</option>
            <option value="gradient">{{ __('تدرج') }}</option>
            <option value="image">{{ __('صورة') }}</option>
            <option value="video">{{ __('فيديو') }}</option>
        </select>
    </div>

    @if (($styleForm['bg_type'] ?? 'none') === 'solid')
        <div class="flex flex-col gap-1.5">
            <label for="st-bgc" class="text-sm font-medium">{{ __('لون الخلفية') }}</label>
            <div class="flex gap-2">
                <input id="st-bgc" type="color" wire:model="styleForm.bg_color" class="h-9 w-12 rounded border p-0.5">
                <input type="text" wire:model="styleForm.bg_color" dir="ltr" class="flex-1 rounded-lg border px-3 py-2 font-mono text-xs">
            </div>
        </div>
    @endif

    @if (($styleForm['bg_type'] ?? '') === 'gradient')
        <div class="grid grid-cols-2 gap-3">
            <div class="flex flex-col gap-1.5">
                <label for="st-gf" class="text-sm font-medium">{{ __('من') }}</label>
                <input id="st-gf" type="color" wire:model="styleForm.bg_gradient_from" class="h-9 w-full rounded border p-0.5">
            </div>
            <div class="flex flex-col gap-1.5">
                <label for="st-gt" class="text-sm font-medium">{{ __('إلى') }}</label>
                <input id="st-gt" type="color" wire:model="styleForm.bg_gradient_to" class="h-9 w-full rounded border p-0.5">
            </div>
            <div class="col-span-2 flex flex-col gap-1.5">
                <label for="st-ga" class="text-sm font-medium">{{ __('الزاوية') }}</label>
                <input id="st-ga" type="range" min="0" max="360" step="15" wire:model="styleForm.bg_gradient_angle" class="w-full">
            </div>
        </div>
    @endif

    @if (in_array($styleForm['bg_type'] ?? '', ['image', 'video'], true))
        <x-website.media-input path="styleForm.bg_image" id="st-bgimg" />
        @if (($styleForm['bg_type'] ?? '') === 'video')
            <div class="flex flex-col gap-1.5">
                <label for="st-bgv" class="text-sm font-medium">{{ __('رابط الفيديو') }}</label>
                <input id="st-bgv" type="url" wire:model="styleForm.bg_video" dir="ltr" class="w-full rounded-lg border px-3 py-2 text-sm">
            </div>
        @endif
        <div class="flex flex-col gap-1.5">
            <label for="st-ov" class="text-sm font-medium">{{ __('تعتيم الطبقة') }} ({{ $styleForm['bg_overlay_opacity'] ?? 50 }}%)</label>
            <input id="st-ov" type="range" min="0" max="100" step="5" wire:model.live="styleForm.bg_overlay_opacity" class="w-full">
        </div>
        <label class="inline-flex items-center gap-2">
            <input type="checkbox" wire:model="styleForm.bg_fixed" class="rounded">
            <span class="text-sm">{{ __('تأثير العمق عند التمرير') }}</span>
        </label>
    @endif

    <div class="grid grid-cols-2 gap-3">
        <div class="flex flex-col gap-1.5">
            <label for="st-pad" class="text-sm font-medium">{{ __('المسافة الرأسية') }}</label>
            <select id="st-pad" wire:model="styleForm.padding_y" class="w-full rounded-lg border px-3 py-2 text-sm">
                @foreach (['none' => 'بدون', 'xs' => 'ضيق جدًا', 'sm' => 'ضيق', 'md' => 'متوسط', 'lg' => 'واسع', 'xl' => 'واسع جدًا', '2xl' => 'ضخم'] as $v => $l)
                    <option value="{{ $v }}">{{ __($l) }}</option>
                @endforeach
            </select>
        </div>
        <div class="flex flex-col gap-1.5">
            <label for="st-txt" class="text-sm font-medium">{{ __('لون النص') }}</label>
            <input id="st-txt" type="color" wire:model="styleForm.text_color" class="h-9 w-full rounded border p-0.5">
        </div>
    </div>

    <div class="flex flex-col gap-1.5">
        <label for="st-anchor" class="text-sm font-medium">{{ __('معرّف الرابط') }}</label>
        <input id="st-anchor" type="text" wire:model="styleForm.anchor" dir="ltr" placeholder="about"
               class="w-full rounded-lg border px-3 py-2 font-mono text-xs">
        <p class="text-xs text-gray-500">{{ __('يُستخدم للانتقال المباشر لهذا القسم') }}</p>
    </div>

    <div class="flex flex-wrap gap-5 pt-1">
        <label class="inline-flex items-center gap-2">
            <input type="checkbox" wire:model="styleForm.hide_on_mobile" class="rounded">
            <span class="text-sm">{{ __('إخفاء على الجوال') }}</span>
        </label>
        <label class="inline-flex items-center gap-2">
            <input type="checkbox" wire:model="styleForm.hide_on_desktop" class="rounded">
            <span class="text-sm">{{ __('إخفاء على الشاشات الكبيرة') }}</span>
        </label>
    </div>

    <div class="flex flex-col gap-1.5">
        <label for="st-cls" class="text-sm font-medium">{{ __('أصناف CSS إضافية') }}</label>
        <input id="st-cls" type="text" wire:model="styleForm.custom_classes" dir="ltr"
               class="w-full rounded-lg border px-3 py-2 font-mono text-xs">
    </div>
</div>
