{% extends "base.html" %}
{% block title %}n8n Integration Setup{% endblock %}
{% block content %}
<div class="max-w-3xl mx-auto px-4 py-12">
    <a href="{{ url_for('integrations.index') }}" class="text-sm text-slate-400 hover:text-white transition mb-4 inline-block">&larr; التكاملات</a>
    <div class="mb-8">
        <div class="text-xs text-gold-500 font-mono tracking-widest uppercase">N8N SELF-HOSTED</div>
        <h1 class="text-2xl font-bold text-white">إعداد تكامل n8n</h1>
    </div>
    <div class="glass p-6 rounded-xl border border-white/10 space-y-6">
        <div>
            <h3 class="text-white font-semibold mb-2">1. أنشئ Webhook Node في n8n</h3>
            <p class="text-sm text-slate-400">اسحب "Webhook" node إلى سطح العمل واختر POST method.</p>
        </div>
        <div>
            <h3 class="text-white font-semibold mb-2">2. انسخ الـ Webhook URL</h3>
            <p class="text-sm text-slate-400">انسخ الرابط من n8n (مثال: <code class="text-gold-400">https://your-n8n.com/webhook/abc123</code>)</p>
        </div>
        <div>
            <h3 class="text-white font-semibold mb-2">3. أضف Webhook في Jadwa AI</h3>
            <p class="text-sm text-slate-400">عُد لصفحة <a href="{{ url_for('integrations.index') }}" class="text-gold-400 underline">التكاملات</a> وألصق الرابط مع اختيار الأحداث.</p>
        </div>
        <div>
            <h3 class="text-white font-semibold mb-2">4. الأحداث المتوفرة</h3>
            <div class="grid grid-cols-2 gap-2 text-xs text-slate-400">
                <div class="bg-white/5 p-2 rounded">report.created</div>
                <div class="bg-white/5 p-2 rounded">report.completed</div>
                <div class="bg-white/5 p-2 rounded">investor.added</div>
                <div class="bg-white/5 p-2 rounded">campaign.published</div>
                <div class="bg-white/5 p-2 rounded">monitor.alert</div>
                <div class="bg-white/5 p-2 rounded">grant.matched</div>
            </div>
        </div>
        <div>
            <h3 class="text-white font-semibold mb-2">5. التوقيع (HMAC-SHA256)</h3>
            <p class="text-sm text-slate-400">أضف secret في إعدادات الـ Webhook واستخدمه في n8n للتحقق عبر header <code class="text-gold-400">X-Jadwa-Signature</code>.</p>
        </div>
        <div class="bg-blue-500/10 border border-blue-500/20 p-4 rounded-lg">
            <p class="text-blue-300 text-sm">n8n هو الخيار المفضل للاستضافة الذاتية. يمكنك تثبيته عبر Docker:</p>
            <code class="text-xs text-blue-400 block mt-2">docker run -d --name n8n -p 5678:5678 n8nio/n8n</code>
        </div>
    </div>
</div>
{% endblock %}