@php
    $canManage = auth()->user()->can('create', \App\Models\SmsTemplate::class);
@endphp

<div>
    <div class="mb-5 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
        <div>
            <h1 class="text-lg font-bold text-gray-800">قالب‌های پیامک</h1>
            <p class="text-sm text-gray-500">متن‌های آماده برای مرحلهٔ «ارسال پیامک» در Workflow. متن هر مرحله از قالب کپی می‌شود؛ ویرایش قالب Workflowهای در حال اجرا را تغییر نمی‌دهد.</p>
        </div>

        @if ($canManage)
            <x-primary-button type="button" wire:click="createNew">+ قالب جدید</x-primary-button>
        @endif
    </div>

    <div class="grid gap-4 md:grid-cols-2">
        @forelse ($templates as $template)
            <div wire:key="template-{{ $template->id }}" class="flex flex-col rounded-xl border border-gray-200 bg-white p-4 shadow-sm">
                <div class="flex items-start justify-between gap-2">
                    <h2 class="font-medium text-gray-900">{{ $template->name }}</h2>
                    <span class="shrink-0 rounded-full bg-gray-100 px-2 py-0.5 text-xs text-gray-600"><span class="ltr-numerals">{{ $template->segments }}</span> پیامک</span>
                </div>
                <p class="mt-2 flex-1 whitespace-pre-line text-sm leading-7 text-gray-600">{{ $template->body }}</p>
                @if ($canManage)
                    <div class="mt-3 flex items-center gap-4 border-t border-gray-100 pt-3 text-xs">
                        <button type="button" wire:click="edit({{ $template->id }})" class="text-indigo-600 hover:underline">ویرایش</button>
                        <button type="button" wire:click="delete({{ $template->id }})" wire:confirm="این قالب حذف شود؟" class="text-rose-600 hover:underline">حذف</button>
                    </div>
                @endif
            </div>
        @empty
            <p class="rounded-xl border border-dashed border-gray-200 p-8 text-center text-sm text-gray-400 md:col-span-2">هنوز قالبی ساخته نشده است.</p>
        @endforelse
    </div>

    @if ($canManage)
    <x-modal name="sms-template-form" :show="$errors->has('body') || $errors->has('name')" focusable max-width="2xl">
        <form wire:submit="save" class="space-y-4 p-6">
            <h2 class="text-base font-bold text-gray-800">{{ $editingId ? 'ویرایش قالب' : 'قالب جدید' }}</h2>

            <div>
                <x-input-label for="tpl-name" value="عنوان داخلی" />
                <x-text-input wire:model="name" id="tpl-name" type="text" class="mt-1 block w-full" placeholder="مثلاً معرفی محصول — پیام اول" />
                <x-input-error :messages="$errors->get('name')" class="mt-2" />
            </div>

            <div>
                <x-input-label for="tpl-body" value="متن پیام" />
                <x-automation.message-field model="body" :preview="$this->preview" :catalog="$variableCatalog" id="tpl-body" />
                <x-input-error :messages="$errors->get('body')" class="mt-2" />
            </div>

            <div class="flex justify-end gap-2">
                <x-secondary-button type="button" x-on:click="$dispatch('close-modal', 'sms-template-form')">انصراف</x-secondary-button>
                <x-primary-button wire:loading.attr="disabled">ذخیره</x-primary-button>
            </div>
        </form>
    </x-modal>
    @endif
</div>