{
	"$schema": "../../schemas/code-crispies-module-schema.json",
	"id": "html-datalist",
	"title": "قائمة البيانات",
	"description": "قدم اقتراحات لحقول النص بدون JavaScript",
	"mode": "html",
	"difficulty": "beginner",
	"lessons": [
		{
			"id": "datalist-basic",
			"title": "حقل مع اقتراحات",
			"description": "عنصر <kbd>&lt;datalist&gt;</kbd> يوفر اقتراحات الإكمال التلقائي للحقول. اربطه باستخدام سمة <kbd>list</kbd> في الحقل بما يتطابق مع <kbd>id</kbd> قائمة البيانات.<br><br>يمكن للمستخدمين الكتابة بحرية - الاقتراحات مجرد مساعدات!",
			"task": "أنشئ محدد متصفح:<br>1. أضف <kbd>&lt;label&gt;</kbd> يقول <code>المتصفح:</code><br>2. أضف <kbd>&lt;input&gt;</kbd> مع <kbd>list=\"browsers\"</kbd><br>3. أضف <kbd>&lt;datalist id=\"browsers\"&gt;</kbd> مع خيارات Chrome و Firefox و Safari",
			"previewHTML": "",
			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } label { display: block; margin-bottom: 8px; font-weight: 500; } input { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 6px; font-size: 16px; } input:focus { outline: 2px solid #1976d2; border-color: transparent; }",
			"sandboxCSS": "",
			"initialCode": "",
			"solution": "<label for=\"browser\">Browser:</label>\n<input type=\"text\" id=\"browser\" list=\"browsers\">\n<datalist id=\"browsers\">\n  <option value=\"Chrome\">\n  <option value=\"Firefox\">\n  <option value=\"Safari\">\n</datalist>",
			"previewContainer": "preview-area",
			"validations": [
				{
					"type": "element_exists",
					"value": "datalist",
					"message": "أضف عنصر <kbd>&lt;datalist&gt;</kbd>"
				},
				{
					"type": "attribute_value",
					"value": { "selector": "input", "attr": "list", "value": "browsers" },
					"message": "اربط الحقل بقائمة البيانات باستخدام <kbd>list=</kbd>\"browsers\""
				},
				{
					"type": "element_count",
					"value": { "selector": "option", "min": 3 },
					"message": "أضف على الأقل 3 عناصر <kbd>&lt;option&gt;</kbd> داخل <kbd>&lt;datalist&gt;</kbd>"
				},
				{
					"type": "element_exists",
					"value": "label",
					"message": "أضف <kbd>&lt;label&gt;</kbd> للحقل"
				}
			]
		},
		{
			"id": "datalist-countries",
			"title": "محدد الدول",
			"description": "قوائم البيانات تعمل بشكل رائع للقوائم الطويلة مثل الدول. يمكن للمستخدمين الكتابة لتصفية الاقتراحات فوراً.<br><br>سمة <kbd>value</kbd> هي ما يتم إدخاله، ويمكنك إضافة نص عرض بعدها.",
			"task": "أنشئ حقل دولة:<br>1. أضف <kbd>&lt;label&gt;</kbd> يقول <code>الدولة:</code><br>2. أضف <kbd>&lt;input&gt;</kbd> مع <kbd>list=\"countries\"</kbd><br>3. أضف <kbd>&lt;datalist id=\"countries\"&gt;</kbd> مع 4 خيارات دول على الأقل",
			"previewHTML": "",
			"previewBaseCSS": "body { font-family: system-ui; padding: 30px; background: linear-gradient(135deg, #e0f7fa 0%, #b2ebf2 100%); min-height: 100vh; margin: 0; box-sizing: border-box; } label { display: block; margin-bottom: 10px; font-weight: 600; color: #00695c; } input { width: 100%; padding: 12px 15px; border: 2px solid #26a69a; border-radius: 8px; font-size: 16px; background: white; } input:focus { outline: none; border-color: #00695c; box-shadow: 0 0 0 3px rgba(38,166,154,0.2); }",
			"sandboxCSS": "",
			"initialCode": "",
			"solution": "<label for=\"country\">Country:</label>\n<input type=\"text\" id=\"country\" list=\"countries\" placeholder=\"Start typing...\">\n<datalist id=\"countries\">\n  <option value=\"Germany\">\n  <option value=\"France\">\n  <option value=\"Spain\">\n  <option value=\"Italy\">\n</datalist>",
			"previewContainer": "preview-area",
			"validations": [
				{
					"type": "element_exists",
					"value": "datalist",
					"message": "أضف عنصر <kbd>&lt;datalist&gt;</kbd>"
				},
				{
					"type": "attribute_value",
					"value": { "selector": "datalist", "attr": "id", "value": "countries" },
					"message": "عيّن <kbd>id=</kbd>\"countries\" في قائمة البيانات"
				},
				{
					"type": "attribute_value",
					"value": { "selector": "input", "attr": "list", "value": "countries" },
					"message": "اربط الحقل باستخدام <kbd>list=</kbd>\"countries\""
				},
				{
					"type": "element_count",
					"value": { "selector": "option", "min": 4 },
					"message": "أضف على الأقل 4 خيارات دول"
				}
			]
		}
	]
}