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

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

{% block extra_css %}
<style>
.page-header-gradient {
    background: linear-gradient(135deg, #005696 0%, #0069a8 50%, #007bbd 100%);
    color: white;
    padding: 1.5rem 2rem;
    border-radius: 1rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 86, 150, 0.2);
}

.section-card {
    background: white;
    border-radius: 1rem;
    border: 2px solid #e2e8f0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: all 0.3s ease;
}

.section-card:hover {
    border-color: #005696;
    box-shadow: 0 10px 25px -5px rgba(0, 86, 150, 0.15);
}

.section-header {
    padding: 1rem 1.5rem;
    border-bottom: 2px solid #e2e8f0;
    background: linear-gradient(to right, #f8fafc, #f1f5f9);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.section-icon {
    width: 40px;
    height: 40px;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>
{% endblock %}

{% block content %}
<!-- Page Header -->
<div class="page-header-gradient">
    <div class="flex justify-between items-center">
        <div>
            <h1 class="text-3xl font-bold mb-2">{% trans "Physicians" %}</h1>
            <p class="text-white/80">{% trans "Manage hospital physicians and medical staff" %}</p>
        </div>
        <a href="{% url 'organizations:physician_create' %}" class="bg-white/20 text-white px-6 py-3 rounded-xl font-bold flex items-center gap-2 hover:bg-white/30 transition backdrop-blur-sm">
            <i data-lucide="plus" class="w-5 h-5"></i> {% trans "Add Physician" %}
        </a>
    </div>
</div>

<!-- Table -->
<div class="section-card">
    <div class="section-header">
        <div class="section-icon bg-emerald-100">
            <i data-lucide="user-md" class="w-5 h-5 text-emerald-600"></i>
        </div>
        <h3 class="font-semibold text-slate-800">{% trans "Physicians List" %}</h3>
    </div>
    <div class="overflow-x-auto">
        <table class="w-full">
            <thead class="bg-slate-50">
                <tr>
                    <th class="px-6 py-4 text-left text-xs font-bold text-slate-500 uppercase tracking-wider">{% trans "Name" %}</th>
                    <th class="px-6 py-4 text-left text-xs font-bold text-slate-500 uppercase tracking-wider">{% trans "License" %}</th>
                    <th class="px-6 py-4 text-left text-xs font-bold text-slate-500 uppercase tracking-wider">{% trans "Specialization" %}</th>
                    <th class="px-6 py-4 text-left text-xs font-bold text-slate-500 uppercase tracking-wider">{% trans "Hospital" %}</th>
                    <th class="px-6 py-4 text-left text-xs font-bold text-slate-500 uppercase tracking-wider">{% trans "Department" %}</th>
                    <th class="px-6 py-4 text-left text-xs font-bold text-slate-500 uppercase tracking-wider">{% trans "Status" %}</th>
                    <th class="px-6 py-4 text-left text-xs font-bold text-slate-500 uppercase tracking-wider">{% trans "Actions" %}</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-100">
                {% for physician in physicians %}
                <tr class="hover:bg-slate-50 transition">
                    <td class="px-6 py-4">
                        <span class="font-semibold text-slate-800">Dr. {{ physician.first_name }} {{ physician.last_name }}</span>
                    </td>
                    <td class="px-6 py-4 text-slate-700">
                        <small class="font-mono text-slate-500">{{ physician.license_number }}</small>
                    </td>
                    <td class="px-6 py-4 text-slate-700">
                        {{ physician.specialization }}
                    </td>
                    <td class="px-6 py-4 text-slate-700">
                        {{ physician.hospital.name }}
                    </td>
                    <td class="px-6 py-4 text-slate-700">
                        {% if physician.department %}
                        <span class="px-2.5 py-1 rounded-lg text-xs font-bold bg-sky-100 text-sky-600">
                            {{ physician.department.name }}
                        </span>
                        {% else %}
                        <span class="text-slate-400">-</span>
                        {% endif %}
                    </td>
                    <td class="px-6 py-4">
                        <span class="px-2.5 py-1 rounded-lg text-xs font-bold bg-green-100 text-green-600">{{ physician.get_status_display }}</span>
                    </td>
                    <td class="px-6 py-4">
                        <div class="flex gap-1">
                            <a href="{% url 'organizations:physician_update' physician.id %}" class="p-2 text-[#005696] hover:bg-sky-50 rounded-lg transition" title="{% trans 'Edit' %}">
                                <i data-lucide="edit-2" class="w-4 h-4"></i>
                            </a>
                            <a href="{% url 'organizations:physician_delete' physician.id %}" class="p-2 text-red-500 hover:bg-red-50 rounded-lg transition" title="{% trans 'Delete' %}">
                                <i data-lucide="trash-2" class="w-4 h-4"></i>
                            </a>
                        </div>
                    </td>
                </tr>
                {% empty %}
                <tr>
                    <td colspan="7" class="px-6 py-12 text-center text-slate-500">
                        <i data-lucide="user-md" class="w-12 h-12 mx-auto mb-3 text-slate-300"></i>
                        <p class="font-semibold">{% trans "No physicians found" %}</p>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}