{% extends 'base.html' %}
{% load i18n %}

{% block content %}
<div class="container-fluid">
    <div class="d-sm-flex align-items-center justify-content-between mb-4">
        <h1 class="h3 mb-0 text-gray-800">{{ title }}</h1>
    </div>

    <div class="card shadow mb-4">
        <div class="card-body">
            <form method="post">
                {% csrf_token %}
                {% for field in form %}
                <div class="mb-3">
                    <label class="form-label">{{ field.label }}</label>
                    {{ field }}
                    {% if field.errors %}
                    <div class="text-danger small">
                        {{ field.errors }}
                    </div>
                    {% endif %}
                </div>
                {% endfor %}
                <button type="submit" class="btn btn-primary">{% trans "Save" %}</button>
                <a href="{% url 'hr:department_list' %}" class="btn btn-secondary">{% trans "Cancel" %}</a>
            </form>
        </div>
    </div>
</div>

<script>
    // Add bootstrap classes to form fields if not already there
    document.querySelectorAll('input, select, textarea').forEach(el => {
        if (!el.classList.contains('form-control') && !el.classList.contains('form-select')) {
            if (el.tagName === 'SELECT') el.classList.add('form-select');
            else el.classList.add('form-control');
        }
    });
</script>
{% endblock %}
