@props([
    'variables' => ['email_specific' => [], 'global' => []],
])

@php
    $emailSpecific = $variables['email_specific'] ?? [];
    $global = $variables['global'] ?? [];
    $hasVariables = ! empty($emailSpecific) || ! empty($global);
@endphp

<div class="bg-white dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 p-5 space-y-5">
    <div class="space-y-1 border-b border-surface-100 dark:border-surface-700 pb-4">
        <h2 class="text-sm font-semibold text-surface-900 dark:text-white">
            {{ __('pages/admin/email-templates.form.variables.title') }}
        </h2>
        <p class="text-xs leading-relaxed text-surface-500 dark:text-surface-400">
            {{ __('pages/admin/email-templates.form.variables.description') }}
        </p>
    </div>

    @if($hasVariables)
        @if(! empty($emailSpecific))
        <section class="space-y-3">
            <div>
                <h3 class="text-xs font-semibold uppercase tracking-wider text-surface-700 dark:text-surface-300">
                    {{ __('pages/admin/email-templates.form.variables.email_specific') }}
                </h3>
                <p class="mt-1 text-xs text-surface-500 dark:text-surface-400">
                    {{ __('pages/admin/email-templates.form.variables.email_specific_hint') }}
                </p>
            </div>

            <div class="overflow-hidden rounded-lg border border-surface-200 dark:border-surface-700">
                <div class="grid grid-cols-[minmax(0,1fr)_minmax(0,1.2fr)] gap-3 border-b border-surface-200 bg-surface-50 px-3 py-2 text-[11px] font-semibold uppercase tracking-wider text-surface-500 dark:border-surface-700 dark:bg-surface-900/40 dark:text-surface-400">
                    <span>{{ __('pages/admin/email-templates.form.variables.placeholder') }}</span>
                    <span>{{ __('pages/admin/email-templates.form.variables.description_label') }}</span>
                </div>
                <div class="divide-y divide-surface-100 dark:divide-surface-700">
                    @foreach($emailSpecific as $placeholder => $label)
                    <div class="grid grid-cols-[minmax(0,1fr)_minmax(0,1.2fr)] gap-3 px-3 py-2.5 text-sm">
                        <code class="break-all rounded bg-primary-50 px-2 py-1 font-mono text-xs text-primary-700 dark:bg-primary-950/40 dark:text-primary-300">{{ $placeholder }}</code>
                        <span class="text-surface-600 dark:text-surface-300">{{ $label }}</span>
                    </div>
                    @endforeach
                </div>
            </div>
        </section>
        @endif

        @if(! empty($global))
        <section class="space-y-3">
            <div>
                <h3 class="text-xs font-semibold uppercase tracking-wider text-surface-700 dark:text-surface-300">
                    {{ __('pages/admin/email-templates.form.variables.global') }}
                </h3>
                <p class="mt-1 text-xs text-surface-500 dark:text-surface-400">
                    {{ __('pages/admin/email-templates.form.variables.global_hint') }}
                </p>
            </div>

            <div class="overflow-hidden rounded-lg border border-surface-200 dark:border-surface-700">
                <div class="grid grid-cols-[minmax(0,1fr)_minmax(0,1.2fr)] gap-3 border-b border-surface-200 bg-surface-50 px-3 py-2 text-[11px] font-semibold uppercase tracking-wider text-surface-500 dark:border-surface-700 dark:bg-surface-900/40 dark:text-surface-400">
                    <span>{{ __('pages/admin/email-templates.form.variables.placeholder') }}</span>
                    <span>{{ __('pages/admin/email-templates.form.variables.description_label') }}</span>
                </div>
                <div class="divide-y divide-surface-100 dark:divide-surface-700">
                    @foreach($global as $placeholder => $label)
                    <div class="grid grid-cols-[minmax(0,1fr)_minmax(0,1.2fr)] gap-3 px-3 py-2.5 text-sm">
                        <code class="break-all rounded bg-surface-100 px-2 py-1 font-mono text-xs text-surface-700 dark:bg-surface-700 dark:text-surface-200">{{ $placeholder }}</code>
                        <span class="text-surface-600 dark:text-surface-300">{{ $label }}</span>
                    </div>
                    @endforeach
                </div>
            </div>
        </section>
        @endif
    @else
        <p class="text-sm text-surface-500 dark:text-surface-400">
            {{ __('pages/admin/email-templates.form.variables.empty') }}
        </p>
    @endif
</div>