{% extends 'video_help/admin/base.html' %}

{% block title %}{{ action }} Category - Video Help Admin{% endblock %}
{% block page_title %}{{ action }} Category{% endblock %}

{% block content %}
<a href="{% url 'video_help:category_list' %}" class="back-btn">
    <i class="fas fa-arrow-left me-2"></i> Back to Categories
</a>

<div class="row">
    <div class="col-lg-8">
        <div class="card">
            <div class="card-header">
                <i class="fas fa-{% if action == 'Add' %}plus{% else %}edit{% endif %} me-2"></i>
                {{ action }} Category
            </div>
            <div class="card-body">
                <form method="post">
                    {% csrf_token %}
                    
                    <div class="mb-3">
                        <label for="name" class="form-label">Category Name <span class="text-danger">*</span></label>
                        <input type="text" 
                               class="form-control" 
                               id="name" 
                               name="name" 
                               value="{{ category.name|default:'' }}"
                               placeholder="e.g., Products, Sales, Dashboard"
                               required>
                    </div>
                    
                    <div class="mb-3">
                        <label for="slug" class="form-label">Slug / Identifier</label>
                        <input type="text" 
                               class="form-control" 
                               id="slug" 
                               name="slug" 
                               value="{{ category.slug|default:'' }}"
                               placeholder="e.g., products, sales (auto-generated if empty)">
                        <div class="form-text">
                            This will be used in the template tag: <code>{% verbatim %}{% video_help_button 'slug-here' %}{% endverbatim %}</code>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="description" class="form-label">Description</label>
                        <textarea class="form-control" 
                                  id="description" 
                                  name="description" 
                                  rows="3"
                                  placeholder="Brief description of this category (optional)">{{ category.description|default:'' }}</textarea>
                    </div>
                    
                    <div class="mb-3">
                        <label for="icon" class="form-label">Icon Class (Font Awesome)</label>
                        <div class="input-group">
                            <span class="input-group-text" id="icon-preview">
                                <i class="{{ category.icon|default:'fas fa-folder' }}"></i>
                            </span>
                            <input type="text" 
                                   class="form-control" 
                                   id="icon" 
                                   name="icon" 
                                   value="{{ category.icon|default:'' }}"
                                   placeholder="e.g., fas fa-box, fas fa-shopping-cart">
                        </div>
                        <div class="form-text">
                            Find icons at <a href="https://fontawesome.com/icons" target="_blank">fontawesome.com/icons</a>
                        </div>
                    </div>
                    
                    <div class="mb-4">
                        <div class="form-check form-switch">
                            <input class="form-check-input" 
                                   type="checkbox" 
                                   id="is_active" 
                                   name="is_active"
                                   {% if action == 'Add' or category.is_active %}checked{% endif %}>
                            <label class="form-check-label" for="is_active">Active</label>
                        </div>
                        <div class="form-text">Inactive categories won't show help videos to users.</div>
                    </div>
                    
                    <div class="d-flex gap-2">
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save me-1"></i>
                            {% if action == 'Add' %}Create Category{% else %}Update Category{% endif %}
                        </button>
                        <a href="{% url 'video_help:category_list' %}" class="btn btn-outline-secondary">
                            Cancel
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>
    
    <div class="col-lg-4">
        <div class="card">
            <div class="card-header">
                <i class="fas fa-lightbulb me-2"></i>Tips
            </div>
            <div class="card-body">
                <ul class="mb-0">
                    <li class="mb-2">Use meaningful slugs that match your app names (e.g., <code>products</code>, <code>sales</code>)</li>
                    <li class="mb-2">The slug is used to link videos to specific pages</li>
                    <li class="mb-2">Icons help users quickly identify categories</li>
                    <li>You can deactivate a category temporarily without deleting it</li>
                </ul>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    // Auto-generate slug from name
    document.getElementById('name').addEventListener('input', function() {
        const slugField = document.getElementById('slug');
        if (!slugField.value || slugField.dataset.autoGenerated === 'true') {
            slugField.value = this.value
                .toLowerCase()
                .replace(/[^a-z0-9]+/g, '-')
                .replace(/(^-|-$)/g, '');
            slugField.dataset.autoGenerated = 'true';
        }
    });
    
    document.getElementById('slug').addEventListener('input', function() {
        this.dataset.autoGenerated = 'false';
    });
    
    // Update icon preview
    document.getElementById('icon').addEventListener('input', function() {
        const preview = document.querySelector('#icon-preview i');
        preview.className = this.value || 'fas fa-folder';
    });
</script>
{% endblock %}