{
	"$schema": "../../schemas/code-crispies-module-schema.json",
	"id": "html-tables",
	"title": "جداول HTML",
	"description": "أنشئ جداول بيانات منظمة بترميز دلالي",
	"mode": "html",
	"difficulty": "beginner",
	"lessons": [
		{
			"id": "table-basic",
			"title": "جداول البيانات",
			"description": "الجداول تعرض البيانات المنظمة في صفوف وأعمدة. استخدم <kbd>&lt;table&gt;</kbd> كحاوية، <kbd>&lt;tr&gt;</kbd> للصفوف، <kbd>&lt;th&gt;</kbd> لخلايا الرأس و <kbd>&lt;td&gt;</kbd> لخلايا البيانات.<br><br>أضف <kbd>&lt;caption&gt;</kbd> لعنوان قابل للوصول يصف محتوى الجدول.",
			"task": "أنشئ جدول أسعار:<br>1. عنصر <kbd>&lt;caption&gt;</kbd> يقول <code>Pricing</code><br>2. صف رأس مع <code>Plan</code> و <code>Price</code><br>3. صفين بيانات لـ Basic ($9) و Pro ($29)",
			"previewHTML": "",
			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: #f5f5f5; } table { border-collapse: collapse; width: 100%; max-width: 350px; background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.1); } caption { padding: 16px; font-weight: 600; font-size: 1.1rem; color: #333; background: #f8f9fa; } th, td { padding: 14px 20px; text-align: left; border-bottom: 1px solid #eee; } th { background: steelblue; color: white; font-weight: 500; } tr:last-child td { border-bottom: none; } tr:hover td { background: #f8f9fa; }",
			"sandboxCSS": "",
			"initialCode": "",
			"solution": "<table>\n  <caption>Pricing</caption>\n  <tr>\n    <th>Plan</th>\n    <th>Price</th>\n  </tr>\n  <tr>\n    <td>Basic</td>\n    <td>$9</td>\n  </tr>\n  <tr>\n    <td>Pro</td>\n    <td>$29</td>\n  </tr>\n</table>",
			"previewContainer": "preview-area",
			"validations": [
				{
					"type": "element_exists",
					"value": "table",
					"message": "أضف عنصر <kbd>&lt;table&gt;</kbd>"
				},
				{
					"type": "element_exists",
					"value": "caption",
					"message": "أضف <kbd>&lt;caption&gt;</kbd> لعنوان الجدول"
				},
				{
					"type": "element_count",
					"value": { "selector": "th", "min": 2 },
					"message": "أضف خلايا رأس (<kbd>&lt;th&gt;</kbd>) لـ Plan و Price"
				},
				{
					"type": "element_count",
					"value": { "selector": "tr", "min": 3 },
					"message": "أضف 3 صفوف (1 رأس + 2 صفوف بيانات)"
				}
			]
		}
	]
}