{% extends 'base.html' %}

{% block title %}Add Category{% endblock %}

{% block content %}
    <h2 class="content-title">Add New Category</h2>
    <p class="content-description">Please fill out the form to create a new category for boycott items.</p>

    <form method="post" class="card p-4 shadow-sm" style="max-width: 600px;">
        {% csrf_token %}

        <div class="mb-3">
            {{ form.name.label_tag }}
            {{ form.name }}
            {% if form.name.errors %}
                <div class="text-danger small mt-1">{{ form.name.errors.0 }}</div>
            {% endif %}
        </div>

        <div class="mb-3">
            {{ form.type.label_tag }}
            {{ form.type }}
            {% if form.type.errors %}
                <div class="text-danger small mt-1">{{ form.type.errors.0 }}</div>
            {% endif %}
        </div>

        <button type="submit" class="btn btn-primary">Add Category</button>
    </form>

    {% if messages %}
        <div class="mt-4">
            {% for message in messages %}
                <div class="alert alert-success">{{ message }}</div>
            {% endfor %}
        </div>
    {% endif %}
{% endblock %}