{% extends "base.html" %}
{% block title %}إدارة المصانع{% endblock %}
{% block content %}
<div class="max-w-7xl mx-auto px-4 py-8">
    <h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-6">🏭 إدارة المصانع</h1>
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow overflow-hidden">
        <table class="w-full text-sm">
            <thead class="bg-gray-50 dark:bg-gray-700">
                <tr>
                    <th class="px-4 py-3 text-right text-gray-700 dark:text-gray-300">المصنع</th>
                    <th class="px-4 py-3 text-right text-gray-700 dark:text-gray-300">الدولة / المدينة</th>
                    <th class="px-4 py-3 text-right text-gray-700 dark:text-gray-300">القطاعات</th>
                    <th class="px-4 py-3 text-center text-gray-700 dark:text-gray-300">موثّق</th>
                    <th class="px-4 py-3 text-center text-gray-700 dark:text-gray-300">نشط</th>
                    <th class="px-4 py-3 text-center text-gray-700 dark:text-gray-300">إجراءات</th>
                </tr>
            </thead>
            <tbody class="divide-y dark:divide-gray-700">
                {% for f in factories %}
                <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50">
                    <td class="px-4 py-3">
                        <div class="font-medium text-gray-900 dark:text-white">{{ f.name_ar or f.name }}</div>
                        <div class="text-xs text-gray-500">{{ f.name if f.name_ar else '' }}</div>
                    </td>
                    <td class="px-4 py-3 text-gray-600 dark:text-gray-400">{{ f.city }}, {{ f.country }}</td>
                    <td class="px-4 py-3">
                        {% for s in (f.sectors_json or [])[:3] %}
                        <span class="inline-block bg-blue-50 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300 text-xs px-2 py-0.5 rounded-full mr-1">{{ s }}</span>
                        {% endfor %}
                    </td>
                    <td class="px-4 py-3 text-center">
                        {% if f.is_verified %}<span class="text-green-600">✓</span>{% else %}<span class="text-gray-400">✗</span>{% endif %}
                    </td>
                    <td class="px-4 py-3 text-center">
                        {% if f.is_active %}<span class="text-green-600">✓</span>{% else %}<span class="text-red-600">✗</span>{% endif %}
                    </td>
                    <td class="px-4 py-3 text-center">
                        <div class="flex gap-1 justify-center">
                            <form method="POST" action="{{ url_for('admin.verify_factory', fid=f.id) }}" class="inline">
                                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                <button class="text-xs px-2 py-1 rounded {% if f.is_verified %}bg-gray-100 text-gray-600{% else %}bg-green-100 text-green-700{% endif %} hover:opacity-80">
                                    {% if f.is_verified %}إلغاء توثيق{% else %}توثيق{% endif %}
                                </button>
                            </form>
                            <form method="POST" action="{{ url_for('admin.toggle_factory', fid=f.id) }}" class="inline">
                                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                <button class="text-xs px-2 py-1 rounded {% if f.is_active %}bg-red-100 text-red-700{% else %}bg-blue-100 text-blue-700{% endif %} hover:opacity-80">
                                    {% if f.is_active %}تعطيل{% else %}تفعيل{% endif %}
                                </button>
                            </form>
                        </div>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}