{{-- Shared notification fields for all forms --}}

<div class="form-group">
    <label class="form-label">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
        </svg>
        عنوان الإشعار <span class="required">*</span>
    </label>
    <input type="text" name="title" class="form-control" placeholder="مثال: رسالة جديدة من نمو" required>
</div>

<div class="form-group">
    <label class="form-label">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 01.865-.501 48.172 48.172 0 003.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z" />
        </svg>
        نص الإشعار <span class="required">*</span>
    </label>
    <textarea name="body" rows="4" class="form-control" placeholder="أدخل نص الإشعار الذي سيظهر للمستخدم" required></textarea>
</div>

<div class="form-group">
    <label class="form-label">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244" />
        </svg>
        الصفحة المراد فتحها (اختياري)
    </label>
    <select name="page" class="form-select page-select">
        <option value="">-- اختر صفحة --</option>
        <optgroup label="التنقل الرئيسي">
            <option value="home">الرئيسية</option>
            <option value="projects">المشاريع</option>
            <option value="gifts">الهدايا</option>
            <option value="account">الحساب</option>
        </optgroup>
        <optgroup label="صفحات المشاريع">
            <option value="project-details">تفاصيل المشروع</option>
            <option value="posts">المنشورات</option>
            <option value="post-details">تفاصيل المنشور</option>
        </optgroup>
        <optgroup label="سجل المستخدم">
            <option value="history">السجل</option>
            <option value="user-history">سجل المستخدم</option>
            <option value="donation-history">سجل التبرعات</option>
            <option value="certificates">الشهادات</option>
            <option value="recurring-donations">التبرعات المتكررة</option>
            <option value="achievements">الإنجازات</option>
        </optgroup>
        <optgroup label="الدفع والسلة">
            <option value="cart">السلة</option>
            <option value="payment">الدفع</option>
            <option value="checkout">إتمام الشراء</option>
            <option value="payment-success">نجاح الدفع</option>
        </optgroup>
        <optgroup label="صفحات أخرى">
            <option value="recurring-donation">التبرع المتكرر</option>
            <option value="launch-campaign">إطلاق حملة</option>
            <option value="about">حول</option>
            <option value="quick-donation">تبرع سريع</option>
        </optgroup>
    </select>
    <span class="form-hint">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" />
        </svg>
        الصفحة التي سيتم فتحها عند النقر على الإشعار
    </span>
</div>

<div class="form-group">
    <label class="form-label">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5" />
        </svg>
        بيانات إضافية (JSON، اختياري)
    </label>
    <textarea name="data" rows="3" class="form-control" placeholder='{"key": "value", "projectId": "123"}'></textarea>
    <span class="form-hint">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" />
        </svg>
        بيانات مخصصة إضافية لإرسالها مع الإشعار بصيغة JSON
    </span>
</div>