# Quick Start: Visual Element Editor

## What It Does

The Visual Element Editor lets you change the visual style of different page elements (header, hero section, news layout, etc.) without touching code.

## How to Use (Admin)

### 1. Access the Editor

1. Login as admin
2. Navigate to the homepage
3. Look for the **purple floating button** in the bottom-right corner (gear icon)
4. Click it to open the Visual Editor

### 2. Configure Elements

1. **Toggle Editing Mode ON**
   - Switch the toggle at the top of the drawer to "Editing"
   
2. **Select Variants**
   - **Header**: Choose between Unified, Edge, Minimal, or Modern
   - **Hero**: Choose between Grid, Swiper, Swiper Full, or Edge
   - **News**: Choose between Grid, Scroller, List, or Magazine
   - **Matches**: Choose between Compact, Expanded, or Timeline
   - **Sponsors**: Choose between Grid, Slider, Scroller, or Pyramid

3. **Save Changes**
   - Click "Save & Reload"
   - The page will reload with your new configuration

## Header Variants Explained

### Unified (Default)
Classic header with logo on left and text on right. Professional and clean.

### Edge
Modern gradient background, centered logo and text. Bold and eye-catching.

### Minimal
Simplified centered header. Just logo and club name, very clean.

### Modern
Bold header with accent border at bottom. Logo has colored background glow.

## Quick Tips

- **Try Before Saving**: Select different options and review the descriptions
- **Unsaved Changes**: Yellow badge warns you if you haven't saved
- **Cancel**: Reverts to last saved configuration
- **Hide Button**: You can temporarily hide the floating button if needed

## Technical Setup (Developer)

### 1. Run Database Migration

```bash
# Make sure migrations are up to date
make migrate-up
```

Or manually:
```bash
cd database/migrations
# Apply: 000020_create_page_element_configs.up.sql
```

### 2. Restart Backend

The routes are already configured. Just restart:
```bash
go run main.go
```

### 3. Frontend is Ready

No build needed - components are already integrated in HomePage.

## Example Configuration

**Modern Sports Club:**
- Header: Modern
- Hero: Swiper Full
- News: Grid
- Matches: Expanded
- Sponsors: Slider

**Classic Club:**
- Header: Unified
- Hero: Grid
- News: List
- Matches: Compact
- Sponsors: Grid

**Bold Contemporary:**
- Header: Edge
- Hero: Edge
- News: Magazine
- Matches: Timeline
- Sponsors: Pyramid

## Troubleshooting

**Q: I don't see the purple button**
- Make sure you're logged in as admin
- Check the bottom-right corner (may be below fold)

**Q: Changes don't save**
- Check browser console for errors
- Ensure backend is running
- Verify database migration was applied

**Q: Page doesn't reload after save**
- The save triggers a `window.location.reload()`
- Check for JavaScript errors in console

**Q: I want to reset to defaults**
- Delete configurations from admin panel or database
- System falls back to default variants (usually 'unified')

## API Reference

For programmatic access:

```bash
# Get current config
GET /api/v1/page-elements?page_type=homepage

# Update config (admin only)
POST /api/v1/admin/page-elements
{
  "page_type": "homepage",
  "element_name": "header",
  "variant": "modern"
}
```

## Support

For issues or feature requests, check:
- `VISUAL_ELEMENT_EDITOR.md` - Full documentation
- Console logs for debugging
- Database table `page_element_configs` for stored values