{% extends 'base.html' %}

{% block title %}HR Management - Optinet Global Links{% endblock %}

{% block extra_css %}
<style>
    .hr-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 1rem;
        border-radius: 0.375rem;
        margin-bottom: 1.5rem;
    }
    
    .employee-card {
        transition: transform 0.2s;
    }
    
    .employee-card:hover {
        transform: translateY(-2px);
    }
    
    .department-badge {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="hr-header">
        <div class="row align-items-center">
            <div class="col">
                <h1 class="mb-0">
                    <i class="bi bi-people-fill"></i> 
                    {% block page_title %}HR Management{% endblock %}
                </h1>
                <p class="mb-0 opacity-75">
                    {% block page_description %}Manage employees, departments, and payroll{% endblock %}
                </p>
            </div>
            <div class="col-auto">
                {% block header_actions %}
                <a href="{% url 'hr:employee_list' %}" class="btn btn-light">
                    <i class="bi bi-people"></i> All Employees
                </a>
                {% endblock %}
            </div>
        </div>
    </div>

    {% if messages %}
        {% for message in messages %}
            <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
                {{ message }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        {% endfor %}
    {% endif %}

    {% block hr_content %}
    {% endblock %}
</div>
{% endblock %}

{% block extra_js %}
<script>
// Auto-dismiss alerts after 5 seconds
setTimeout(function() {
    $('.alert').fadeOut('slow');
}, 5000);
</script>
{% endblock %}