# Template Presets

Thư mục này chứa các template preset có sẵn cho UI Builder.

## 📋 Cấu trúc File Preset

Mỗi file `.json` định nghĩa một template mẫu với cấu trúc:

```json
{
  "component": "footer",           // Loại component (footer, header, banner, landing, sidebar)
  "name": "Default Footer",        // Tên hiển thị
  "slug": "footer-default",        // Slug unique
  "thumbnail": "/modules/uibuilder/assets/img/footer-default.png", // Đường dẫn ảnh preview
  "html": "<footer>...</footer>",  // HTML template với Mustache placeholders {{key}}
  "css": ".footer { ... }",        // CSS tùy chỉnh
  "config_schema": {               // Schema định nghĩa các field cấu hình
    "site_name": {
      "type": "text",              // Loại input
      "label": "Tên website",      // Label hiển thị
      "default": "My Website",     // Giá trị mặc định
      "required": true             // Bắt buộc hay không
    }
  }
}
```

## 🎨 Các loại field hỗ trợ

### 1. text
```json
"field_name": {
  "type": "text",
  "label": "Label",
  "default": "Default value",
  "required": true
}
```

### 2. textarea
```json
"field_name": {
  "type": "textarea",
  "label": "Label",
  "default": "Default text",
  "required": false
}
```

### 3. email
```json
"field_name": {
  "type": "email",
  "label": "Email",
  "default": "email@example.com",
  "required": false
}
```

### 4. url
```json
"field_name": {
  "type": "url",
  "label": "URL",
  "default": "https://example.com",
  "required": false
}
```

### 5. image
```json
"field_name": {
  "type": "image",
  "label": "Logo",
  "default": "",
  "required": false
}
```
- Hiển thị button upload ảnh
- Lưu URL ảnh sau khi upload

### 6. color
```json
"field_name": {
  "type": "color",
  "label": "Màu chủ đạo",
  "default": "#3b82f6",
  "required": false
}
```

### 7. json
```json
"field_name": {
  "type": "json",
  "label": "Data JSON",
  "default": "[]",
  "required": false
}
```

## 🧱 Mustache Template Syntax

HTML template sử dụng Mustache syntax:

### Variables
```html
<h1>{{title}}</h1>
<p>{{description}}</p>
```

### Conditional sections
```html
{{#logo}}
<img src="{{logo}}" alt="Logo">
{{/logo}}
```

### Arrays
```json
"menu_items": "[{\"label\":\"Home\",\"url\":\"/\"}]"
```

```html
{{#menu_items}}
<a href="{{url}}">{{label}}</a>
{{/menu_items}}
```

## ➕ Cách thêm Preset mới

### Bước 1: Tạo file JSON

Tạo file mới trong thư mục này, ví dụ: `footer-company.json`

```json
{
  "component": "footer",
  "name": "Company Footer",
  "slug": "footer-company",
  "thumbnail": "/modules/uibuilder/assets/img/footer-company.png",
  "html": "<footer class='bg-gray-800 text-white py-8'>\n  <div class='container mx-auto px-4'>\n    <p>© {{year}} {{company_name}}</p>\n  </div>\n</footer>",
  "css": "footer { border-top: 3px solid #3b82f6; }",
  "config_schema": {
    "company_name": {
      "type": "text",
      "label": "Tên công ty",
      "default": "ACME Corp",
      "required": true
    },
    "year": {
      "type": "text",
      "label": "Năm",
      "default": "2025",
      "required": true
    }
  }
}
```

### Bước 2: Tạo thumbnail

Tạo ảnh preview kích thước 400x300px và lưu vào:
```
public/modules/uibuilder/assets/img/footer-company.png
```

### Bước 3: Test

- Reload trang admin
- Vào "Templates" → "Tạo Template mới"
- Preset mới sẽ xuất hiện trong danh sách

## 💡 Tips

1. **Sử dụng Tailwind CSS** cho styling nhanh
2. **Test trên nhiều kích thước màn hình** (responsive)
3. **Đặt tên slug rõ ràng** và dễ nhớ
4. **Thumbnail chất lượng tốt** giúp user dễ chọn
5. **Default values hợp lý** giúp user có baseline tốt

## 📦 Presets có sẵn

- ✅ `footer-default.json` - Footer đơn giản
- ✅ `footer-modern.json` - Footer với social links
- ✅ `header-simple.json` - Header với navigation
- ✅ `banner-hero.json` - Hero banner với CTA

## 🔄 Reload Presets

Presets được load từ filesystem mỗi khi truy cập trang "Tạo Template mới".
Không cần restart server khi thêm preset mới.