{% extends 'dashboard/base.html' %}
{% block title %}{{ action }} Category{% endblock %}
{% block page_title %}{{ action }} Category{% endblock %}
{% block content %}
<div class="page-header">
    <div><h1>{{ action }} Category</h1><div class="breadcrumb"><a href="{% url 'dashboard:category_list' %}">Categories</a> / {{ action }}</div></div>
    <a href="{% url 'dashboard:category_list' %}" class="btn btn-outline"><i class="fas fa-arrow-left"></i> Back</a>
</div>

<div style="max-width:600px">
<form method="POST" enctype="multipart/form-data">
{% csrf_token %}
<div class="card">
    <div class="card-header"><span class="card-title">Category Details</span></div>
    <div class="card-body" style="display:flex;flex-direction:column;gap:18px">
        <div class="form-group">
            <label class="form-label">Category Name *</label>
            <input type="text" name="name" class="form-control" required value="{{ category.name|default:'' }}" placeholder="e.g. Men's Wear">
        </div>
        <div class="form-group">
            <label class="form-label">Description</label>
            <textarea name="description" class="form-control" rows="3" placeholder="Short description...">{{ category.description|default:'' }}</textarea>
        </div>
        <div class="form-grid-2">
            <div class="form-group">
                <label class="form-label">Display Order</label>
                <input type="number" name="order" class="form-control" value="{{ category.order|default:'0' }}" min="0">
                <div class="form-hint">Lower numbers appear first</div>
            </div>
            <div class="form-group" style="display: flex; flex-direction: column;">
                <label class="form-label">Category Image</label>
                
                {% if category and category.image %}
                <div style="width: 100%; max-width: 180px; height: 120px; border-radius: 6px; overflow: hidden; margin-bottom: 10px; border: 1px solid var(--light-gray); background: #f8f9fa;">
                    <img src="{{ category.image.url }}" alt="Category Thumbnail" style="width:100%; height:100%; object-fit:contain; display:block;">
                </div>
                {% endif %}
                
                <input type="file" name="image" class="form-control" accept="image/*">
            </div>
        </div>
        <div class="form-check">
            <input type="checkbox" name="is_active" id="is_active" {% if not category or category.is_active %}checked{% endif %} style="margin-right: 6px; cursor: pointer;">
            <label for="is_active" style="cursor: pointer;">Active (visible on store)</label>
        </div>
        <div style="display:flex;gap:10px;margin-top:6px;">
            <button type="submit" class="btn btn-primary"><i class="fas fa-save"></i> Save Category</button>
            <a href="{% url 'dashboard:category_list' %}" class="btn btn-outline">Cancel</a>
        </div>
    </div>
</div>
</form>
</div>
{% endblock %}