{% extends "layouts/base.html" %}
{% load i18n %}

{% block title %}{% trans "Departments" %} - PX360{% endblock %}

{% block content %}
<!-- Header -->
<header class="mb-6">
    <div class="flex justify-between items-start">
        <div>
            <h1 class="text-2xl font-bold text-navy flex items-center gap-3">
                <i data-lucide="building-2" class="w-7 h-7 text-blue"></i>
                {% trans "Departments" %}
            </h1>
            <p class="text-sm text-slate mt-1">{% trans "Manage hospital departments and their structure" %}</p>
        </div>
    </div>
</header>

<!-- Departments Table -->
<div class="bg-white rounded-2xl shadow-sm border-2 border-slate-200 overflow-hidden">
    <div class="px-6 py-4 border-b-2 border-slate-200 flex justify-between items-center bg-gradient-to-r from-slate-50 to-slate-100">
        <h3 class="font-bold text-navy flex items-center gap-2">
            <i data-lucide="building-2" class="w-5 h-5 text-navy"></i>
            {% trans "Department List" %}
        </h3>
    </div>
    <div class="overflow-x-auto">
        <table class="w-full">
            <thead class="bg-gray-50">
                <tr>
                    <th class="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">{% trans "Name" %}</th>
                    <th class="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">{% trans "Code" %}</th>
                    <th class="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">{% trans "Hospital" %}</th>
                    <th class="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">{% trans "Manager" %}</th>
                    <th class="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">{% trans "Status" %}</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100">
                {% for dept in departments %}
                <tr class="hover:bg-gray-50 transition">
                    <td class="px-6 py-4">
                        <strong class="text-gray-800">{{ dept.name }}</strong>
                    </td>
                    <td class="px-6 py-4">
                        <span class="text-xs font-mono bg-slate-100 px-2 py-1 rounded">{{ dept.code }}</span>
                    </td>
                    <td class="px-6 py-4 text-gray-600">{{ dept.hospital.name }}</td>
                    <td class="px-6 py-4">
                        {% if dept.manager %}
                        <span class="text-gray-600">{{ dept.manager.get_full_name }}</span>
                        {% else %}
                        <span class="text-gray-400">-</span>
                        {% endif %}
                    </td>
                    <td class="px-6 py-4">
                        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-green-100 text-green-700">
                            {{ dept.get_status_display }}
                        </span>
                    </td>
                </tr>
                {% empty %}
                <tr>
                    <td colspan="5" class="text-center py-8 text-gray-500">
                        <i data-lucide="building-2" class="w-12 h-12 mx-auto mb-3 text-gray-300"></i>
                        <p>{% trans "No departments found" %}</p>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}