{% extends 'base.html' %}

{% block header_title %}تعديل حساب: {{ account.name }}{% 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 'edit_account' account.id %}" 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" value="{{ account.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" value="{{ account.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" value="{{ account.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">إعدادات الخوادم المتقدمة</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="{{ account.imap_server }}" 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="{{ account.smtp_server }}" 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="{{ account.smtp_port }}" 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 %}