{% 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>

    <form method="post">
        {% csrf_token %}
        
        <!-- Section: Personal Information -->
        <div class="card shadow mb-4">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">{% trans "Personal Information" %}</h6>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label for="{{ form.first_name.id_for_label }}" class="form-label">{% trans "First Name" %}</label>
                        {{ form.first_name }}
                        {% if form.first_name.errors %}
                            <div class="text-danger small">{{ form.first_name.errors }}</div>
                        {% endif %}
                    </div>
                    <div class="col-md-6 mb-3">
                        <label for="{{ form.last_name.id_for_label }}" class="form-label">{% trans "Last Name" %}</label>
                        {{ form.last_name }}
                        {% if form.last_name.errors %}
                            <div class="text-danger small">{{ form.last_name.errors }}</div>
                        {% endif %}
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label for="{{ form.email.id_for_label }}" class="form-label">{% trans "Email Address" %}</label>
                        {{ form.email }}
                        {% if form.email.errors %}
                            <div class="text-danger small">{{ form.email.errors }}</div>
                        {% endif %}
                    </div>
                    <div class="col-md-6 mb-3">
                        <label for="{{ form.phone.id_for_label }}" class="form-label">{% trans "Phone Number" %}</label>
                        {{ form.phone }}
                        {% if form.phone.errors %}
                            <div class="text-danger small">{{ form.phone.errors }}</div>
                        {% endif %}
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label for="{{ form.gender.id_for_label }}" class="form-label">{% trans "Gender" %}</label>
                        {{ form.gender }}
                        {% if form.gender.errors %}
                            <div class="text-danger small">{{ form.gender.errors }}</div>
                        {% endif %}
                    </div>
                    <div class="col-md-6 mb-3">
                        <label for="{{ form.date_of_birth.id_for_label }}" class="form-label">{% trans "Date of Birth" %}</label>
                        {{ form.date_of_birth }}
                        {% if form.date_of_birth.errors %}
                            <div class="text-danger small">{{ form.date_of_birth.errors }}</div>
                        {% endif %}
                    </div>
                </div>

                <div class="mb-3">
                    <label for="{{ form.address.id_for_label }}" class="form-label">{% trans "Address" %}</label>
                    {{ form.address }}
                    {% if form.address.errors %}
                        <div class="text-danger small">{{ form.address.errors }}</div>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- Section: Job Details -->
        <div class="card shadow mb-4">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">{% trans "Job Details" %}</h6>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label for="{{ form.department.id_for_label }}" class="form-label">{% trans "Department" %}</label>
                        {{ form.department }}
                        {% if form.department.errors %}
                            <div class="text-danger small">{{ form.department.errors }}</div>
                        {% endif %}
                    </div>
                    <div class="col-md-6 mb-3">
                        <label for="{{ form.job_position.id_for_label }}" class="form-label">{% trans "Job Position" %}</label>
                        {{ form.job_position }}
                        {% if form.job_position.errors %}
                            <div class="text-danger small">{{ form.job_position.errors }}</div>
                        {% endif %}
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label for="{{ form.hire_date.id_for_label }}" class="form-label">{% trans "Hire Date" %}</label>
                        {{ form.hire_date }}
                        {% if form.hire_date.errors %}
                            <div class="text-danger small">{{ form.hire_date.errors }}</div>
                        {% endif %}
                    </div>
                    <div class="col-md-6 mb-3">
                        <label for="{{ form.salary.id_for_label }}" class="form-label">{% trans "Basic Salary" %}</label>
                        <div class="input-group">
                            <span class="input-group-text">$</span>
                            {{ form.salary }}
                        </div>
                        {% if form.salary.errors %}
                            <div class="text-danger small">{{ form.salary.errors }}</div>
                        {% endif %}
                    </div>
                </div>
                
                 <div class="row">
                    <div class="col-md-6 mb-3">
                        <label for="{{ form.status.id_for_label }}" class="form-label">{% trans "Employment Status" %}</label>
                        {{ form.status }}
                        {% if form.status.errors %}
                            <div class="text-danger small">{{ form.status.errors }}</div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>

        <!-- Section: System Access -->
        <div class="card shadow mb-4">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">{% trans "System & Access" %}</h6>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label for="{{ form.user.id_for_label }}" class="form-label">{% trans "Linked User Account" %}</label>
                        {{ form.user }}
                        <small class="form-text text-muted">{% trans "Select a user account for system login access." %}</small>
                        {% if form.user.errors %}
                            <div class="text-danger small">{{ form.user.errors }}</div>
                        {% endif %}
                    </div>
                    <div class="col-md-6 mb-3">
                        <label for="{{ form.biometric_id.id_for_label }}" class="form-label">{% trans "Biometric Device ID" %}</label>
                        {{ form.biometric_id }}
                        <small class="form-text text-muted">{% trans "The ID used on the attendance device (e.g. ZKTeco)." %}</small>
                        {% if form.biometric_id.errors %}
                            <div class="text-danger small">{{ form.biometric_id.errors }}</div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>

        <div class="mb-4">
            <button type="submit" class="btn btn-primary btn-lg">
                <i class="fas fa-save fa-sm text-white-50"></i> {% trans "Save Employee" %}
            </button>
            <a href="{% url 'hr:employee_list' %}" class="btn btn-secondary btn-lg">
                {% trans "Cancel" %}
            </a>
        </div>
    </form>
</div>
{% endblock %}