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

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

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h1 class="h3">Departments</h1>
                <a href="{% url 'hr:department_create' %}" class="btn btn-primary">
                    <i class="fas fa-plus"></i> Add Department
                </a>
            </div>
        </div>
    </div>

    <!-- HR Navigation -->
    {% include 'hr/hr_nav.html' %}

    <div class="card">
        <div class="card-body">
            {% if departments %}
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead class="table-light">
                            <tr>
                                <th>Name</th>
                                <th>Manager</th>
                                <th>Employees</th>
                                <th>Status</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for department in departments %}
                            <tr>
                                <td>
                                    <strong>{{ department.name }}</strong>
                                    {% if department.description %}
                                        <br><small class="text-muted">{{ department.description|truncatewords:10 }}</small>
                                    {% endif %}
                                </td>
                                <td>
                                    {% if department.manager %}
                                        {{ department.manager.full_name }}
                                    {% else %}
                                        <span class="text-muted">No manager assigned</span>
                                    {% endif %}
                                </td>
                                <td>
                                    <span class="badge bg-info">{{ department.employee_count }} employees</span>
                                </td>
                                <td>
                                    {% if department.is_active %}
                                        <span class="badge bg-success">Active</span>
                                    {% else %}
                                        <span class="badge bg-danger">Inactive</span>
                                    {% endif %}
                                </td>
                                <td>
                                    <div class="btn-group btn-group-sm">
                                        <a href="{% url 'hr:department_detail' department.pk %}" class="btn btn-outline-primary" title="View Details">
                                            <i class="fas fa-eye"></i>
                                        </a>
                                        <a href="{% url 'hr:department_edit' department.pk %}" class="btn btn-outline-secondary" title="Edit">
                                            <i class="fas fa-edit"></i>
                                        </a>
                                        <a href="{% url 'hr:department_delete' department.pk %}" class="btn btn-outline-danger" title="Delete">
                                            <i class="fas fa-trash"></i>
                                        </a>
                                    </div>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            {% else %}
                <div class="text-center py-5">
                    <i class="fas fa-building fa-3x text-muted mb-3"></i>
                    <h5 class="text-muted">No departments found</h5>
                    <p class="text-muted">Create your first department to get started.</p>
                    <a href="{% url 'hr:department_create' %}" class="btn btn-primary">
                        <i class="fas fa-plus"></i> Add Department
                    </a>
                </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}