@extends('layouts.admin')
@section('title', 'SMS Templates')
@section('page-title', 'SMS Templates')
@section('page-subtitle', 'Manage reusable SMS templates')

@section('content')
<div class="space-y-6">
    <div class="flex justify-between items-center">
        <h2 class="font-cinzel font-semibold text-lg text-[var(--text-primary)]">All Templates</h2>
        <a href="{{ route('admin.sms.templates.create') }}" class="btn-royal px-4 py-2 rounded-lg text-white">
            <i class="fas fa-plus mr-2"></i> Create Template
        </a>
    </div>

    <div class="card-royal overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full">
                <thead class="bg-[var(--bg-secondary)]">
                    <tr class="text-left text-sm text-[var(--text-secondary)]">
                        <th class="px-6 py-4 font-semibold">Name</th>
                        <th class="px-6 py-4 font-semibold">Code</th>
                        <th class="px-6 py-4 font-semibold">Content</th>
                        <th class="px-6 py-4 font-semibold">Status</th>
                        <th class="px-6 py-4 font-semibold">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-[var(--border-color)]">
                    @forelse($templates as $template)
                        <tr class="hover:bg-[var(--bg-secondary)]">
                            <td class="px-6 py-4 text-[var(--text-primary)]">{{ $template->name }}</td>
                            <td class="px-6 py-4 font-mono text-sm text-[var(--text-secondary)]">{{ $template->code }}</td>
                            <td class="px-6 py-4 text-[var(--text-secondary)] max-w-xs truncate">{{ $template->content }}</td>
                            <td class="px-6 py-4">
                                <span class="px-2 py-1 rounded-full text-xs {{ $template->is_active ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-700' }}">
                                    {{ $template->is_active ? 'Active' : 'Inactive' }}
                                </span>
                            </td>
                            <td class="px-6 py-4">
                                <div class="flex items-center gap-2">
                                    <a href="{{ route('admin.sms.templates.edit', $template->id) }}" class="p-2 rounded-lg hover:bg-[var(--bg-card)] text-blue-500">
                                        <i class="fas fa-edit"></i>
                                    </a>
                                    <form action="{{ route('admin.sms.templates.destroy', $template->id) }}" method="POST" class="inline">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="p-2 rounded-lg hover:bg-[var(--bg-card)] text-red-500" onclick="return confirm('Delete this template?')">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="px-6 py-12 text-center text-[var(--text-secondary)]">
                                <i class="fas fa-envelope text-4xl mb-4"></i>
                                <p>No templates found</p>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection