<div class="space-y-6">
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
        <div class="flex justify-between items-start">
            <div>
                <h3 class="text-xl font-bold text-gray-900"><?= htmlspecialchars($order['title']) ?></h3>
                <p class="text-sm text-gray-500 mt-1">Recebido em
                    <?= date('d/m/Y H:i', strtotime($order['received_at'])) ?>
                </p>
            </div>
            <span
                class="px-3 py-1 rounded-full text-sm font-semibold <?= $order['type'] == 'block' ? 'bg-red-100 text-red-800' : 'bg-green-100 text-green-800' ?>">
                <?= $order['type'] == 'block' ? 'Bloqueio' : 'Desbloqueio' ?>
            </span>
        </div>
        <div class="mt-6 border-t border-gray-100 pt-4">
            <h4 class="text-sm font-medium text-gray-700">Conteúdo / Descrição</h4>
            <style>
                .prose a {
                    color: #2563eb;
                    text-decoration: underline;
                }

                .prose a:hover {
                    color: #1e40af;
                }
            </style>
            <div class="mt-2 text-gray-600 text-sm prose max-w-none">
                <?= \App\Utils\TextFormatter::formatContent($order['content'] ?? '') ?></div>
        </div>
    </div>

    <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-100 bg-gray-50">
            <h3 class="text-lg font-semibold text-gray-800">Domínios Afetados (<?= count($items) ?>)</h3>
        </div>
        <div class="overflow-x-auto max-h-96">
            <table class="w-full text-left border-collapse">
                <thead class="bg-gray-50 sticky top-0">
                    <tr>
                        <th class="px-6 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">Domínio</th>
                        <th class="px-6 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">Ação Nesta
                            Ordem</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100">
                    <?php foreach ($items as $item): ?>
                        <tr class="hover:bg-gray-50">
                            <td class="px-6 py-3 text-sm font-mono text-gray-900"><?= htmlspecialchars($item['name']) ?>
                            </td>
                            <td class="px-6 py-3 text-sm">
                                <span
                                    class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full <?= $item['action'] == 'block' ? 'bg-red-100 text-red-800' : 'bg-green-100 text-green-800' ?>">
                                    <?= $item['action'] == 'block' ? 'Bloquear' : 'Desbloquear' ?>
                                </span>
                            </td>
                        </tr>
                    <?php endforeach; ?>
                </tbody>
            </table>
        </div>
    </div>
</div>