{% extends "base.html" %}

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

{% block content %}
{% include "partials/breadcrumb.html" %}

<div class="card max-w-2xl">
    <form method="post" class="space-y-4">
        {% csrf_token %}
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1">First Name</label>
                {{ form.first_name }}
                {% if form.first_name.errors %}<p class="text-red-600 text-xs mt-1">{{ form.first_name.errors.0 }}</p>{% endif %}
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1">Last Name</label>
                {{ form.last_name }}
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1">Username</label>
                {{ form.username }}
                {% if form.username.errors %}<p class="text-red-600 text-xs mt-1">{{ form.username.errors.0 }}</p>{% endif %}
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1">Email</label>
                {{ form.email }}
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1">Password</label>
                {{ form.password }}
                {% if form.password.errors %}<p class="text-red-600 text-xs mt-1">{{ form.password.errors.0 }}</p>{% endif %}
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1">Role</label>
                {{ form.role }}
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1">Phone Number</label>
                {{ form.phone_number }}
            </div>
            <div class="flex items-center gap-2 mt-6">
                {{ form.active }}
                <label class="text-sm text-slate-700">Active</label>
            </div>
        </div>
        <div class="flex gap-3 pt-4">
            <button type="submit" class="btn-primary">Save</button>
            <a href="{% url 'accounts:staff_list' %}" class="btn-secondary">Cancel</a>
        </div>
    </form>
</div>
{% endblock %}