{
	"$schema": "../../schemas/code-crispies-module-schema.json",
	"id": "html-dialog",
	"title": "مربعات الحوار",
	"description": "أنشئ مربعات حوار نموذجية بدون مكتبات JavaScript",
	"mode": "html",
	"difficulty": "beginner",
	"lessons": [
		{
			"id": "dialog-basic",
			"title": "فتح مربع الحوار",
			"description": "عنصر <kbd>&lt;dialog&gt;</kbd> ينشئ نافذة نموذجية أصلية. أضف سمة <kbd>open</kbd> لعرضها.<br><br>استخدم <kbd>&lt;form method=\"dialog\"&gt;</kbd> بداخلها لإغلاقها عند إرسال النموذج - بدون JavaScript!",
			"task": "أنشئ مربع حوار مع:<br>1. سمة <kbd>open</kbd> لعرضه<br>2. عنصر <kbd>&lt;h2&gt;</kbd> يقول <code>أهلاً!</code><br>3. عنصر <kbd>&lt;p&gt;</kbd> مع رسالة ترحيب<br>4. عنصر <kbd>&lt;form method=\"dialog\"&gt;</kbd> مع زر إغلاق",
			"previewHTML": "",
			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; min-height: 200px; background: #f5f5f5; } dialog { border: none; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.2); padding: 25px; max-width: 400px; } dialog::backdrop { background: rgba(0,0,0,0.5); } dialog h2 { margin: 0 0 15px 0; color: #1976d2; } dialog p { color: #666; margin: 0 0 20px 0; } dialog button { background: #1976d2; color: white; border: none; padding: 10px 25px; border-radius: 6px; cursor: pointer; font-size: 16px; } dialog button:hover { background: #1565c0; }",
			"sandboxCSS": "",
			"initialCode": "",
			"solution": "<dialog open>\n  <h2>Welcome!</h2>\n  <p>This is a native HTML dialog element.</p>\n  <form method=\"dialog\">\n    <button>Close</button>\n  </form>\n</dialog>",
			"previewContainer": "preview-area",
			"validations": [
				{
					"type": "element_exists",
					"value": "dialog",
					"message": "أضف عنصر <kbd>&lt;dialog&gt;</kbd>"
				},
				{
					"type": "attribute_value",
					"value": { "selector": "dialog", "attr": "open", "value": true },
					"message": "أضف سمة <kbd>open</kbd> لعرض مربع الحوار"
				},
				{
					"type": "element_exists",
					"value": "dialog h2",
					"message": "أضف عنوان <kbd>&lt;h2&gt;</kbd> داخل مربع الحوار"
				},
				{
					"type": "element_exists",
					"value": "form[method='dialog']",
					"message": "أضف <kbd>&lt;form method=\"dialog\"&gt;</kbd> للإغلاق"
				},
				{
					"type": "element_exists",
					"value": "dialog button",
					"message": "أضف زر إغلاق داخل النموذج"
				}
			]
		},
		{
			"id": "dialog-form",
			"title": "حوار + نموذج",
			"description": "مربعات الحوار يمكن أن تحتوي على نماذج كاملة. <kbd>method=\"dialog\"</kbd> يجعل النموذج يغلق مربع الحوار عند الإرسال بدلاً من إرسال البيانات.<br><br>هذا النمط مثالي لحوارات التأكيد، المدخلات السريعة، أو لوحات الإعدادات.",
			"task": "أنشئ مربع حوار تأكيد:<br>1. أضف <kbd>open</kbd> لعرضه<br>2. عنصر <kbd>&lt;h2&gt;</kbd> يقول <code>تأكيد الحذف</code><br>3. عنصر <kbd>&lt;p&gt;</kbd> يسأل <code>هل أنت متأكد؟</code><br>4. عنصر <kbd>&lt;form method=\"dialog\"&gt;</kbd> مع أزرار إلغاء وحذف",
			"previewHTML": "",
			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; min-height: 200px; background: linear-gradient(135deg, #fce4ec 0%, #f8bbd9 100%); } dialog { border: none; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.2); padding: 25px; max-width: 350px; text-align: center; } dialog h2 { margin: 0 0 10px 0; color: #c62828; } dialog p { color: #666; margin: 0 0 20px 0; } dialog form { display: flex; gap: 10px; justify-content: center; } dialog button { padding: 10px 20px; border-radius: 6px; cursor: pointer; font-size: 14px; border: none; } dialog button:first-child { background: #e0e0e0; color: #333; } dialog button:last-child { background: #c62828; color: white; } dialog button:hover { opacity: 0.9; }",
			"sandboxCSS": "",
			"initialCode": "",
			"solution": "<dialog open>\n  <h2>Confirm Delete</h2>\n  <p>Are you sure you want to delete this item?</p>\n  <form method=\"dialog\">\n    <button value=\"cancel\">Cancel</button>\n    <button value=\"delete\">Delete</button>\n  </form>\n</dialog>",
			"previewContainer": "preview-area",
			"validations": [
				{
					"type": "element_exists",
					"value": "dialog[open]",
					"message": "أضف <kbd>&lt;dialog&gt;</kbd> مع سمة open"
				},
				{
					"type": "element_exists",
					"value": "dialog h2",
					"message": "أضف عنواناً لمربع الحوار"
				},
				{
					"type": "element_exists",
					"value": "form[method='dialog']",
					"message": "أضف <kbd>&lt;form method=\"dialog\"&gt;</kbd> للأزرار"
				},
				{
					"type": "element_count",
					"value": { "selector": "dialog button", "min": 2 },
					"message": "أضف على الأقل زرين (إلغاء وتأكيد)"
				}
			]
		}
	]
}