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

{% block content %}
<div class="container-fluid">
    <h1 class="h3 mb-4 text-gray-800">{{ title }}</h1>

    <div class="card shadow mb-4">
        <div class="card-body">
            <form method="post">
                {% csrf_token %}
                
                {% if form.errors %}
                    <div class="alert alert-danger">
                        {% for field in form %}
                            {% for error in field.errors %}
                                <strong>{{ field.label }}:</strong> {{ error }}<br>
                            {% endfor %}
                        {% endfor %}
                        {% for error in form.non_field_errors %}
                            {{ error }}<br>
                        {% endfor %}
                    </div>
                {% endif %}

                <h5 class="text-primary mb-3">{% trans "Personal Information" %}</h5>
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label for="{{ form.first_name.id_for_label }}" class="form-label">{{ form.first_name.label }}</label>
                        {{ form.first_name }}
                    </div>
                    <div class="col-md-6 mb-3">
                        <label for="{{ form.last_name.id_for_label }}" class="form-label">{{ form.last_name.label }}</label>
                        {{ form.last_name }}
                    </div>
                    <div class="col-md-6 mb-3">
                        <label for="{{ form.gender.id_for_label }}" class="form-label">{{ form.gender.label }}</label>
                        {{ form.gender }}
                    </div>
                    <div class="col-md-6 mb-3">
                        <label for="{{ form.date_of_birth.id_for_label }}" class="form-label">{{ form.date_of_birth.label }}</label>
                        {{ form.date_of_birth }}
                    </div>
                    <div class="col-md-6 mb-3">
                        <label for="{{ form.email.id_for_label }}" class="form-label">{{ form.email.label }}</label>
                        {{ form.email }}
                    </div>
                    <div class="col-md-6 mb-3">
                        <label for="{{ form.phone.id_for_label }}" class="form-label">{{ form.phone.label }}</label>
                        {{ form.phone }}
                    </div>
                    <div class="col-12 mb-3">
                        <label for="{{ form.address.id_for_label }}" class="form-label">{{ form.address.label }}</label>
                        {{ form.address }}
                    </div>
                </div>

                <hr class="my-4">

                <h5 class="text-primary mb-3">{% trans "Job Details" %}</h5>
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label for="{{ form.department.id_for_label }}" class="form-label">{{ form.department.label }}</label>
                        {{ form.department }}
                    </div>
                    <div class="col-md-6 mb-3">
                        <label for="{{ form.job_position.id_for_label }}" class="form-label">{{ form.job_position.label }}</label>
                        {{ form.job_position }}
                    </div>
                    <div class="col-md-4 mb-3">
                        <label for="{{ form.hire_date.id_for_label }}" class="form-label">{{ form.hire_date.label }}</label>
                        {{ form.hire_date }}
                    </div>
                    <div class="col-md-4 mb-3">
                        <label for="{{ form.status.id_for_label }}" class="form-label">{{ form.status.label }}</label>
                        {{ form.status }}
                    </div>
                     <div class="col-md-4 mb-3">
                        <label for="{{ form.salary.id_for_label }}" class="form-label">{{ form.salary.label }}</label>
                        {{ form.salary }}
                    </div>
                </div>

                <hr class="my-4">

                <h5 class="text-primary mb-3">{% trans "System Access & Biometrics" %}</h5>
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label for="{{ form.user.id_for_label }}" class="form-label">{{ form.user.label }}</label>
                        {{ form.user }}
                        <small class="form-text text-muted">{% trans "Link to a system user account for login access." %}</small>
                    </div>
                    <div class="col-md-6 mb-3">
                        <label for="{{ form.biometric_id.id_for_label }}" class="form-label">{{ form.biometric_id.label }}</label>
                        {{ form.biometric_id }}
                         <small class="form-text text-muted">{% trans "User ID on the physical biometric device." %}</small>
                    </div>
                </div>

                <div class="mt-4">
                    <button type="submit" class="btn btn-primary">{% trans "Save" %}</button>
                    <a href="{% url 'hr:employee_list' %}" class="btn btn-secondary">{% trans "Cancel" %}</a>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}