{
	"$schema": "../../schemas/code-crispies-module-schema.json",
	"id": "html-forms-basic",
	"title": "نماذج HTML",
	"description": "تعلم إنشاء النماذج بأنواع حقول مختلفة",
	"mode": "html",
	"difficulty": "beginner",
	"lessons": [
		{
			"id": "form-structure",
			"title": "هيكل النموذج",
			"description": "كل نموذج يحتاج غلاف <kbd>&lt;form&gt;</kbd>. بداخله، استخدم <kbd>&lt;label&gt;</kbd> لوصف الحقول و <kbd>&lt;input&gt;</kbd> لإدخال البيانات.<br><br>سمة <kbd>for</kbd> في التسميات يجب أن تطابق <kbd>id</kbd> في الحقول للوصولية.",
			"task": "أنشئ نموذجاً مع:<br>1. <kbd>&lt;label&gt;</kbd> بالنص <code>الاسم:</code> وسمة <kbd>for=\"name\"</kbd><br>2. <kbd>&lt;input&gt;</kbd> نصي بسمات <kbd>id=\"name\"</kbd> و <kbd>name=\"name\"</kbd>",
			"previewHTML": "",
			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } form { max-width: 300px; } label { display: block; margin-bottom: 5px; font-weight: 500; } input { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }",
			"sandboxCSS": "",
			"initialCode": "",
			"solution": "<form>\n  <label for=\"name\">الاسم:</label>\n  <input type=\"text\" id=\"name\" name=\"name\">\n</form>",
			"previewContainer": "preview-area",
			"validations": [
				{
					"type": "element_exists",
					"value": "form",
					"message": "أحط كل شيء بعنصر <kbd>&lt;form&gt;</kbd>"
				},
				{
					"type": "element_exists",
					"value": "label",
					"message": "أضف <kbd>&lt;label&gt;</kbd> لحقلك"
				},
				{
					"type": "element_exists",
					"value": "input",
					"message": "أضف عنصر <kbd>&lt;input&gt;</kbd>"
				},
				{
					"type": "attribute_value",
					"value": { "selector": "label", "attr": "for", "value": null },
					"message": "أضف سمة <kbd>for</kbd> للتسمية"
				},
				{
					"type": "attribute_value",
					"value": { "selector": "input", "attr": "id", "value": null },
					"message": "أضف سمة <kbd>id</kbd> لحقلك"
				}
			]
		},
		{
			"id": "input-types",
			"title": "أنواع الحقول",
			"description": "أنواع الحقول المختلفة توفر لوحات مفاتيح وتحقق مناسب:<br><br><kbd>type=\"text\"</kbd> - نص عام<br><kbd>type=\"email\"</kbd> - بريد إلكتروني مع تحقق @<br><kbd>type=\"password\"</kbd> - أحرف مخفية<br><kbd>type=\"number\"</kbd> - لوحة مفاتيح رقمية<br><kbd>type=\"tel\"</kbd> - لوحة مفاتيح هاتف",
			"task": "أنشئ نموذج تسجيل دخول بحقلين:<br>1. حقل بريد: <kbd>&lt;label for=\"email\"&gt;البريد:&lt;/label&gt;</kbd> و <kbd>&lt;input type=\"email\" id=\"email\"&gt;</kbd><br>2. حقل كلمة مرور: <kbd>&lt;label for=\"password\"&gt;كلمة المرور:&lt;/label&gt;</kbd> و <kbd>&lt;input type=\"password\" id=\"password\"&gt;</kbd>",
			"previewHTML": "",
			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } form { max-width: 300px; } label { display: block; margin-top: 15px; margin-bottom: 5px; } label:first-child { margin-top: 0; } input { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }",
			"sandboxCSS": "",
			"initialCode": "<form>\n  \n</form>",
			"solution": "<form>\n  <label for=\"email\">البريد:</label>\n  <input type=\"email\" id=\"email\" name=\"email\">\n  \n  <label for=\"password\">كلمة المرور:</label>\n  <input type=\"password\" id=\"password\" name=\"password\">\n</form>",
			"previewContainer": "preview-area",
			"validations": [
				{
					"type": "element_exists",
					"value": "input[type='email']",
					"message": "أضف حقل بـ type=\"email\""
				},
				{
					"type": "element_exists",
					"value": "input[type='password']",
					"message": "أضف حقل بـ type=\"password\""
				},
				{
					"type": "element_count",
					"value": { "selector": "label", "min": 2 },
					"message": "أضف تسميات لكلا الحقلين"
				}
			]
		},
		{
			"id": "submit-button",
			"title": "زر الإرسال",
			"description": "النماذج تحتاج طريقة لإرسال البيانات. استخدم:<br><br><kbd>&lt;button type=\"submit\"&gt;</kbd> - مفضل، محتوى مرن<br><kbd>&lt;input type=\"submit\"&gt;</kbd> - زر نص بسيط<br><br>نص الزر يجب أن يكون موجه للعمل (مثل <code>تسجيل الدخول</code>، 'التسجيل'، 'إرسال').",
			"task": "أضف زر إرسال للنموذج بالنص <code>تسجيل الدخول</code>.",
			"previewHTML": "",
			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } form { max-width: 300px; } label { display: block; margin-top: 15px; margin-bottom: 5px; } label:first-child { margin-top: 0; } input { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } button { width: 100%; margin-top: 20px; padding: 10px; background: #1976d2; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; } button:hover { background: #1565c0; }",
			"sandboxCSS": "",
			"initialCode": "<form>\n  <label for=\"email\">البريد:</label>\n  <input type=\"email\" id=\"email\">\n  \n  <label for=\"password\">كلمة المرور:</label>\n  <input type=\"password\" id=\"password\">\n  \n</form>",
			"solution": "<form>\n  <label for=\"email\">البريد:</label>\n  <input type=\"email\" id=\"email\">\n  \n  <label for=\"password\">كلمة المرور:</label>\n  <input type=\"password\" id=\"password\">\n  \n  <button type=\"submit\">تسجيل الدخول</button>\n</form>",
			"previewContainer": "preview-area",
			"validations": [
				{
					"type": "element_exists",
					"value": "button[type='submit'], input[type='submit']",
					"message": "أضف زر إرسال لنموذجك"
				},
				{
					"type": "element_text",
					"value": { "selector": "button", "text": "تسجيل الدخول" },
					"message": "يجب أن يعرض الزر <kbd>تسجيل الدخول</kbd>"
				}
			]
		}
	]
}