{% extends 'base.html' %}

{% block page_title %}{{ title }}{% endblock %}

{% block header_actions %}
<div class="btn-group me-2">
    <a href="{% url 'category_list' %}" class="btn btn-sm btn-outline-secondary">
        <i class="fas fa-arrow-left me-1"></i> Back to Categories
    </a>
</div>
{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-md-8">
        <div class="card shadow">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0">
                    <i class="fas fa-tag me-2"></i>{{ title }}
                </h5>
            </div>
            <div class="card-body">
                <form method="post" id="categoryForm">
                    {% csrf_token %}
                    
                    {% if messages %}
                    <div class="messages mb-4">
                        {% for message in messages %}
                        <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
                            {{ message }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                        {% endfor %}
                    </div>
                    {% endif %}
                    
                    <div class="mb-3">
                        <label for="name" class="form-label">Category Name *</label>
                        <input type="text" class="form-control" id="name" name="name" 
                               value="{{ category.name|default:'' }}" required
                               placeholder="e.g., Electronics, Clothing, Food">
                        <div class="form-text">
                            Enter a descriptive name for the category
                        </div>
                    </div>
                    
                    <div class="mb-4">
                        <label for="description" class="form-label">Description</label>
                        <textarea class="form-control" id="description" name="description" 
                                  rows="4" placeholder="Optional description for the category">{{ category.description|default:'' }}</textarea>
                        <div class="form-text">
                            Add a description to help identify this category
                        </div>
                    </div>
                    
                    <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                        <a href="{% url 'category_list' %}" class="btn btn-secondary me-md-2">
                            <i class="fas fa-times me-1"></i> Cancel
                        </a>
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save me-1"></i> 
                            {% if category %}Update{% else %}Create{% endif %} Category
                        </button>
                    </div>
                </form>
            </div>
            {% if category %}
            <div class="card-footer bg-light">
                <div class="row">
                    <div class="col-md-6">
                        <small class="text-muted">
                            <i class="fas fa-calendar-plus me-1"></i>
                            Created: {{ category.created_at|date:"M d, Y" }}
                        </small>
                    </div>
                    <div class="col-md-6 text-end">
                        <small class="text-muted">
                            <i class="fas fa-boxes me-1"></i>
                            Products: {{ category.product_count }}
                        </small>
                    </div>
                </div>
            </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}