{% extends "base.html" %}

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

{% block content %}
{% include "partials/breadcrumb.html" %}
<div class="card max-w-xl">
    <form method="post" class="space-y-4">
        {% csrf_token %}

        <div>
            <label class="block text-sm font-medium text-slate-700 mb-1">{{ form.item_name.label }}</label>
            {{ form.item_name }}
            {% if form.item_name.errors %}<p class="text-red-600 text-xs mt-1">{{ form.item_name.errors.0 }}</p>{% endif %}
        </div>

        <div>
            <label class="block text-sm font-medium text-slate-700 mb-1">{{ form.category.label }}</label>
            {{ form.category }}
            {% if form.category.errors %}<p class="text-red-600 text-xs mt-1">{{ form.category.errors.0 }}</p>{% endif %}
        </div>

        <div>
            <label class="block text-sm font-medium text-slate-700 mb-1">{{ form.service_type.label }}</label>
            {{ form.service_type }}
            {% if form.service_type.errors %}<p class="text-red-600 text-xs mt-1">{{ form.service_type.errors.0 }}</p>{% endif %}
        </div>

        <div>
            <label class="block text-sm font-medium text-slate-700 mb-1">Price Range</label>
            <div class="flex flex-col sm:flex-row sm:items-center gap-3">
                <div class="flex-1">
                    {{ form.min_price }}
                    {% if form.min_price.errors %}<p class="text-red-600 text-xs mt-1">{{ form.min_price.errors.0 }}</p>{% endif %}
                </div>
                <span class="text-slate-500 text-center hidden sm:inline">—</span>
                <div class="flex-1">
                    {{ form.max_price }}
                    {% if form.max_price.errors %}<p class="text-red-600 text-xs mt-1">{{ form.max_price.errors.0 }}</p>{% endif %}
                </div>
            </div>
            {% if form.non_field_errors %}
            <p class="text-red-600 text-xs mt-1">{{ form.non_field_errors.0 }}</p>
            {% endif %}
        </div>

        <div class="flex items-center gap-2">
            {{ form.active }}
            <label class="text-sm text-slate-700">{{ form.active.label }}</label>
        </div>

        <div class="flex gap-3 pt-2">
            <button type="submit" class="btn-primary">Save</button>
            <a href="{% url 'items:list' %}" class="btn-secondary">Cancel</a>
        </div>
    </form>
</div>
{% endblock %}