{% extends 'base.html' %}

{% block header_title %}ربط حساب إيميل جديد{% endblock %}

{% block content %}
<div class="max-w-2xl mx-auto bg-white shadow-sm rounded-lg border border-gray-200 overflow-hidden mt-6">
    <form method="POST" action="{% url 'add_account' %}" class="px-8 py-6 space-y-6">
        {% csrf_token %}
        
        <div class="border-b border-gray-200 pb-4 mb-4">
            <h3 class="text-lg font-medium text-gray-900">بيانات الحساب الأساسية</h3>
            <p class="text-sm text-gray-500 mt-1">أدخل بيانات البريد الإلكتروني الذي ترغب في جلب رسائله للنظام.</p>
        </div>

        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">اسم الحساب (للتوضيح فقط)</label>
            <input type="text" name="name" placeholder="مثال: إيميل المبيعات الرئيسي" required class="w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">البريد الإلكتروني</label>
                <input type="email" name="email_address" placeholder="info@example.com" required class="w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 text-left focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" dir="ltr">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">كلمة المرور (App Password)</label>
                <input type="password" name="password" required class="w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 text-left focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" dir="ltr">
            </div>
        </div>

        <div class="border-t border-gray-200 pt-6 mt-6">
            <h3 class="text-md font-medium text-gray-900 mb-4">إعدادات الخوادم المتقدمة (تترك كما هي لـ Gmail)</h3>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">IMAP Server (للاستقبال)</label>
                    <input type="text" name="imap_server" value="imap.gmail.com" required class="w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 text-left bg-gray-50 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" dir="ltr">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">SMTP Server (للإرسال)</label>
                    <input type="text" name="smtp_server" value="smtp.gmail.com" required class="w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 text-left bg-gray-50 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" dir="ltr">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">SMTP Port (المنفذ)</label>
                    <input type="number" name="smtp_port" value="465" required class="w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 text-left bg-gray-50 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" dir="ltr">
                </div>
            </div>
        </div>

        <div class="pt-6 flex justify-end gap-3 border-t border-gray-200">
            <a href="{% url 'accounts_list' %}" class="bg-white border border-gray-300 rounded-md shadow-sm py-2 px-4 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">إلغاء</a>
            <button type="submit" class="bg-indigo-600 border border-transparent rounded-md shadow-sm py-2 px-4 text-sm font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">حفظ وربط الحساب</button>
        </div>
    </form>
</div>
{% endblock %}