<div class="p-8 max-w-7xl mx-auto space-y-6">

    <!-- Header -->
    <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
        <div>
            <h1 class="text-2xl font-bold text-white tracking-tight">WhatsApp Message Templates</h1>
            <p class="text-slate-400 text-xs">Manage pre-approved WhatsApp Business templates for automated notifications & broadcasts.</p>
        </div>
        <button onclick="document.getElementById('create-template-modal').classList.remove('hidden')" class="bg-emerald-500 hover:bg-emerald-600 text-slate-950 text-xs font-bold px-4 py-2.5 rounded-xl shadow-lg shadow-emerald-500/20 transition flex items-center space-x-1.5">
            <i class="fa-solid fa-plus text-xs"></i>
            <span>Add Template</span>
        </button>
    </div>

    <!-- Templates Grid -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <?php foreach ($templates as $tmpl): ?>
            <div class="bg-slate-900 border border-slate-800 rounded-3xl p-6 shadow-xl space-y-4 flex flex-col justify-between group hover:border-slate-700 transition">
                <div class="space-y-3">
                    <div class="flex items-center justify-between">
                        <span class="font-mono text-xs font-bold text-blue-400"><?= htmlspecialchars($tmpl['name']) ?></span>
                        <span class="text-[10px] bg-emerald-500/20 text-emerald-400 border border-emerald-500/30 px-2 py-0.5 rounded-full font-semibold">
                            <?= htmlspecialchars($tmpl['status']) ?>
                        </span>
                    </div>

                    <div class="flex items-center space-x-2 text-[10px] text-slate-500">
                        <span>Category: <strong class="text-slate-400"><?= htmlspecialchars($tmpl['category']) ?></strong></span>
                        <span>•</span>
                        <span>Lang: <strong class="text-slate-400"><?= htmlspecialchars($tmpl['language']) ?></strong></span>
                    </div>

                    <!-- WhatsApp Message Preview Bubble -->
                    <div class="bg-slate-950 p-4 rounded-2xl border border-slate-800/80 space-y-2">
                        <?php if ($tmpl['header_type'] !== 'NONE'): ?>
                            <div class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">[<?= htmlspecialchars($tmpl['header_type']) ?> HEADER]</div>
                        <?php endif; ?>
                        
                        <p class="text-xs text-slate-200 leading-relaxed"><?= htmlspecialchars($tmpl['body_text']) ?></p>

                        <?php if ($tmpl['footer_text']): ?>
                            <p class="text-[10px] text-slate-500 pt-2 border-t border-slate-800/60"><?= htmlspecialchars($tmpl['footer_text']) ?></p>
                        <?php endif; ?>
                    </div>
                </div>

                <div class="flex items-center justify-between pt-3 border-t border-slate-800/60 text-xs">
                    <span class="text-[10px] text-slate-500"><?= date('M d, Y', strtotime($tmpl['created_at'])) ?></span>
                    <form method="POST" action="/templates/<?= $tmpl['id'] ?>/delete" onsubmit="return confirm('Delete this template?');">
                        <button type="submit" class="text-slate-500 hover:text-red-400 p-1 transition">
                            <i class="fa-solid fa-trash-can text-xs"></i>
                        </button>
                    </form>
                </div>
            </div>
        <?php endforeach; ?>
    </div>

</div>

<!-- Create Template Modal -->
<div id="create-template-modal" class="hidden fixed inset-0 z-50 bg-black/70 backdrop-blur-sm flex items-center justify-center p-4">
    <div class="bg-slate-900 border border-slate-800 rounded-3xl max-w-lg w-full p-6 shadow-2xl space-y-4">
        <div class="flex items-center justify-between border-b border-slate-800 pb-3">
            <h3 class="font-bold text-white text-base">Register WhatsApp Template</h3>
            <button onclick="document.getElementById('create-template-modal').classList.add('hidden')" class="text-slate-400 hover:text-white"><i class="fa-solid fa-xmark"></i></button>
        </div>
        <form method="POST" action="/templates" class="space-y-4">
            <div>
                <label class="block text-xs text-slate-400 mb-1">Template Identifier (lowercase, underscores)</label>
                <input type="text" name="name" required placeholder="e.g. order_delivery_update" class="w-full bg-slate-950 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white font-mono focus:outline-none focus:border-emerald-500">
            </div>
            <div class="grid grid-cols-2 gap-3">
                <div>
                    <label class="block text-xs text-slate-400 mb-1">Category</label>
                    <select name="category" class="w-full bg-slate-950 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-emerald-500">
                        <option value="MARKETING">MARKETING</option>
                        <option value="UTILITY">UTILITY</option>
                        <option value="AUTHENTICATION">AUTHENTICATION</option>
                    </select>
                </div>
                <div>
                    <label class="block text-xs text-slate-400 mb-1">Language Code</label>
                    <input type="text" name="language" value="en_US" required class="w-full bg-slate-950 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white font-mono focus:outline-none focus:border-emerald-500">
                </div>
            </div>
            <div>
                <label class="block text-xs text-slate-400 mb-1">Template Body Text (Use {{1}}, {{2}} for dynamic variables)</label>
                <textarea name="body_text" rows="4" required placeholder="Hi {{1}}, your order {{2}} has been confirmed!" class="w-full bg-slate-950 border border-slate-800 rounded-xl p-3 text-xs text-white focus:outline-none focus:border-emerald-500 resize-none"></textarea>
            </div>
            <div>
                <label class="block text-xs text-slate-400 mb-1">Footer Text (Optional)</label>
                <input type="text" name="footer_text" placeholder="e.g. Customer Support Team" class="w-full bg-slate-950 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-emerald-500">
            </div>
            <button type="submit" class="w-full bg-emerald-500 hover:bg-emerald-600 text-slate-950 font-bold py-2.5 rounded-xl transition">
                Register Template
            </button>
        </form>
    </div>
</div>
