# Action Icons Template Tag

## Overview

The `action_icons` template tag library provides reusable SVG icons for common UI actions throughout the application.

## Usage

### Loading the Library

```django
{% load action_icons %}
```

### Using the action_icon Tag

**Correct syntax** (simple_tag):
```django
{% action_icon 'create' %}
{% action_icon 'edit' %}
{% action_icon 'delete' %}
{% action_icon 'view' %}
```

**Incorrect syntax** (will cause TemplateSyntaxError):
```django
{{ action_icon 'create' }}  <!-- DON'T USE THIS -->
```

### Available Icons

| Action Name | Icon | Description |
|-------------|-------|-------------|
| `create` | ➕ Plus sign | Create/add new item |
| `edit` | ✏️ Pencil | Edit existing item |
| `delete` | 🗑️ Trash | Delete item |
| `view` | 👁️ Eye | View details |
| `save` | 💾 Floppy disk | Save changes |
| `cancel` | ✖️ X | Cancel action |
| `back` | ⬅️ Arrow | Go back |
| `download` | ⬇️ Down arrow | Download content |
| `upload` | ⬆️ Up arrow | Upload content |
| `search` | 🔍 Magnifying glass | Search |
| `filter` | 🔽 Lines | Filter results |
| `check` | ✓ Checkmark | Confirm/success |
| `warning` | ⚠️ Triangle | Warning |
| `info` | ℹ️ Circle | Information |
| `refresh` | 🔄 Arrow circle | Refresh/reload |
| `copy` | 📋 Documents | Copy to clipboard |
| `print` | 🖨️ Printer | Print content |
| `export` | ⬇️ Down arrow | Export data |
| `import` | ⬆️ Up arrow | Import data |

### Custom Size

```django
{% action_icon 'create' size=20 %}
```

Default size is 16x16 pixels.

## Example Usage

### In Button Links

```django
<a href="{% url 'items:create' %}" class="btn btn-primary">
    {% action_icon 'create' %} {% trans "Add Item" %}
</a>
```

### In Action Buttons

```django
<a href="{% url 'items:edit' item.pk %}" 
   class="btn btn-sm btn-warning" 
   title="{% trans 'Edit' %}">
    {% action_icon 'edit' %}
</a>
```

### In Headers

```django
<h5 class="card-title mb-0">
    {% action_icon 'filter' %} {% trans "Items" %}
</h5>
```

## Technical Details

### File Location

`apps/social/templatetags/action_icons.py`

### Registration

```python
from django import template

register = template.Library()

@register.simple_tag
def action_icon(name, size=16):
    """
    Return SVG icon for a given action.
    """
    # Returns safe HTML string
```

### Why simple_tag?

The `action_icon` function is registered as a `simple_tag`, not a filter or template variable:
- **simple_tag**: `{% tag_name args %}` - Can process multiple arguments
- **filter**: `{{ value|filter }}` - Works on single value
- **assignment_tag**: `{% tag_name as variable %}` - Stores result in variable

For icons, a `simple_tag` is most appropriate because:
1. It returns HTML directly
2. It doesn't need a variable context
3. It takes parameters (icon name, optional size)

## Common Errors

### TemplateSyntaxError

**Error**: `Could not parse the remainder from 'action_icon 'create''`

**Cause**: Using variable syntax instead of tag syntax
```django
{{ action_icon 'create' }}  <!-- WRONG -->
```

**Fix**: Use tag syntax
```django
{% action_icon 'create' %}  <!-- CORRECT -->
```

### Icon Not Showing

**Cause**: Forgetting to load the template tag library
```django
{% load i18n %}  <!-- Missing action_icons -->
```

**Fix**: Load the library
```django
{% load i18n action_icons %}
```

## Implementation Notes

- All icons are SVG format for scalability
- Icons use Bootstrap Icons design language
- Icons return `mark_safe()` HTML strings
- Default size matches Bootstrap button small size (16px)
- Icons can be customized with CSS for color, hover effects, etc.

## Related Files

- `apps/social/templatetags/action_icons.py` - Tag implementation
- `apps/social/templatetags/social_icons.py` - Social media icons
- `apps/social/templatetags/star_rating.py` - Star rating icons