{% extends "base.html" %}

{% block title %}Employees | MediHR HRMS{% endblock %}

{% block content %}
<div class="top-bar">
    <div>
        <h1 class="h4 fw-bold mb-1">Employee Directory</h1>
        <p class="text-muted small mb-0">Manage your staff and their assignments.</p>
    </div>
    <a href="/admin/core/employee/add/" class="btn btn-primary btn-sm rounded-pill px-3">
        <i class="fas fa-plus me-1"></i> Add Employee
    </a>
</div>

<div class="table-card">
    <div class="table-responsive">
        <table class="table table-hover align-middle mb-0">
            <thead>
                <tr>
                    <th>Employee ID</th>
                    <th>Name</th>
                    <th>Department</th>
                    <th>Position</th>
                    <th>Shift</th>
                    <th>Status</th>
                </tr>
            </thead>
            <tbody>
                {% for emp in employees %}
                <tr>
                    <td class="fw-bold">{{ emp.employee_id }}</td>
                    <td>
                        <div class="d-flex align-items-center">
                            <div class="rounded-circle bg-primary-subtle d-flex align-items-center justify-content-center text-primary me-2" style="width: 32px; height: 32px; font-weight: 700;">
                                {{ emp.first_name|first }}{{ emp.last_name|first }}
                            </div>
                            <div>{{ emp.first_name }} {{ emp.last_name }}</div>
                        </div>
                    </td>
                    <td>{{ emp.department.name|default:"--" }}</td>
                    <td>{{ emp.position }}</td>
                    <td><span class="badge bg-light text-dark border">{{ emp.shift.name|default:"--" }}</span></td>
                    <td>
                        {% if emp.is_active %}
                        <span class="badge bg-success-subtle text-success border border-success-subtle">Active</span>
                        {% else %}
                        <span class="badge bg-secondary-subtle text-secondary border border-secondary-subtle">Inactive</span>
                        {% endif %}
                    </td>
                </tr>
                {% empty %}
                <tr>
                    <td colspan="6" class="text-center py-5 text-muted">No employees found.</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}
