{% extends "base.html" %}
{% block title %}Competitor Monitor — {{ report.project_name }}{% endblock %}
{% block content %}
<div class="max-w-4xl mx-auto px-4 py-12">
    <a href="{{ url_for('study.view', report_id=report.id) }}" 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">COMPETITOR MONITOR</div>
        <h1 class="text-2xl font-bold text-white">مراقبة المنافسين — {{ report.project_name }}</h1>
    </div>
    <form method="POST" class="glass p-4 rounded-xl border border-white/10 flex gap-3 mb-6">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <input name="url" type="url" required placeholder="https://competitor.com" class="flex-1 bg-white/5 border border-white/10 text-white rounded-lg px-3 py-2 text-sm">
        <button type="submit" class="bg-gold-500/20 border border-gold-500/30 text-gold-400 px-4 py-2 rounded-lg text-sm hover:bg-gold-500/30 transition">إضافة</button>
    </form>
    <div class="space-y-3">
        {% for m in monitors %}
        <div class="glass p-4 rounded-xl border border-white/10 flex items-center justify-between">
            <div>
                <div class="text-white text-sm">{{ m.competitor_url }}</div>
                <div class="text-xs text-slate-400">تغييرات مكتشفة: {{ m.changes_detected }} • {{ 'نشط' if m.is_active else 'متوقف' }}</div>
            </div>
            <form method="POST" action="{{ url_for('advanced.delete_monitor', mid=m.id) }}">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                <button type="submit" class="text-xs text-red-400 hover:text-red-300 transition">حذف</button>
            </form>
        </div>
        {% else %}
        <div class="text-center py-8 text-slate-500">لا توجد مواقع مراقبة بعد</div>
        {% endfor %}
    </div>
</div>
{% endblock %}