{% extends "base.html" %}
{% load static %}
{% load i18n %}
{% load humanize %}

{% block title %}{% trans "Admin Settings" %} - ATS{% endblock %}

{% block content %}

<!-- Breadcrumb -->
<nav class="mb-6">
    <ol class="flex items-center space-x-2 text-sm">
        <li>
            <a href="{% url 'settings' %}" class="text-gray-600 hover:text-gray-900 no-underline">
                {% trans "Settings" %}
            </a>
        </li>
        <li class="text-gray-400">/</li>
        <li class="font-semibold" style="color: #9d2235;">
            {% trans "Staff Settings" %}
        </li>
    </ol>
</nav>

<!-- Header -->
<div class="mb-6">
    <h1 class="text-2xl font-bold text-gray-900 flex items-center gap-3">
        <i class="fas fa-cogs" style="color: #9d2235;"></i>
        {% trans "Staff Management Dashboard" %}
    </h1>
</div>

<!-- Controls Bar -->
<div class="flex items-center justify-between mb-6">
    <h2 class="text-lg font-semibold text-gray-700">
        {% trans "Staff User List" %}
    </h2>
    
    <a href="{% url 'create_staff_user' %}" 
       class="inline-flex items-center gap-2 px-4 py-2 rounded-lg font-medium transition-all duration-200"
       style="background-color: #9d2235; color: white;"
       onmouseover="this.style.backgroundColor='#7a1a29'"
       onmouseout="this.style.backgroundColor='#9d2235'">
        <i class="fas fa-user-plus"></i>
        <span>{% trans "Create New User" %}</span>
    </a>
</div>

<!-- Table Card -->
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
    <div class="overflow-x-auto">
        <table class="w-full">
            <thead>
                <tr class="border-b-2 border-gray-200">
                    <th class="text-left py-3 px-4 text-sm font-semibold text-gray-900">
                        {% trans "ID" %}
                    </th>
                    <th class="text-left py-3 px-4 text-sm font-semibold text-gray-900">
                        {% trans "Full Name" %}
                    </th>
                    <th class="text-left py-3 px-4 text-sm font-semibold text-gray-900">
                        {% trans "Email" %}
                    </th>
                    <th class="text-center py-3 px-4 text-sm font-semibold text-gray-900">
                        {% trans "Status" %}
                    </th>
                    <th class="text-center py-3 px-4 text-sm font-semibold text-gray-900">
                        {% trans "First Join" %}
                    </th>
                    <th class="text-center py-3 px-4 text-sm font-semibold text-gray-900">
                        {% trans "Last Login" %}
                    </th>
                    <th class="text-center py-3 px-4 text-sm font-semibold text-gray-900" style="min-width: 250px;">
                        {% trans "Actions" %}
                    </th>
                </tr>
            </thead>
            <tbody>
                {% for user in staffs %}
                <tr class="border-b border-gray-100 hover:bg-gray-50 transition-colors">
                    <td class="py-3 px-4 text-sm text-gray-600">{{ user.pk }}</td>
                    <td class="py-3 px-4 text-sm text-gray-900 font-medium">
                        {{ user.get_full_name|default:user.first_name }}
                    </td>
                    <td class="py-3 px-4 text-sm text-gray-600">{{ user.email }}</td>
                    
                    <!-- Status Badge -->
                    <td class="py-3 px-4 text-center">
                        {% if user.is_active %}
                            <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium"
                                  style="background-color: rgba(157, 34, 53, 0.1); color: #9d2235;">
                                {% trans "Active" %}
                            </span>
                        {% else %}
                            <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-gray-100 text-gray-600">
                                {% trans "Inactive" %}
                            </span>
                        {% endif %}
                    </td>
                    
                    <!-- First Join Date -->
                    <td class="py-3 px-4 text-center">
                        <span class="text-sm text-gray-500" title="{{ user.date_joined|date:'DATETIME_FORMAT' }}">
                            {{ user.date_joined|date:"d M Y" }}
                        </span>
                    </td>
                    
                    <!-- Last Login Date -->
                    <td class="py-3 px-4 text-center">
                        {% if user.last_login %}
                            <span class="text-sm text-gray-600" title="{{ user.last_login|date:'DATETIME_FORMAT' }}">
                                {{ user.last_login|naturaltime }}
                            </span>
                        {% else %}
                            <span class="text-sm text-gray-400">—</span>
                        {% endif %}
                    </td>
                    
                    <!-- Actions -->
                    <td class="py-3 px-4 text-center">
                        <div class="flex items-center justify-center gap-2">
                            <!-- Change Password Button -->
                            <a href="{% url 'set_staff_password' user.pk %}"
                               class="inline-flex items-center justify-center w-8 h-8 rounded-lg transition-colors duration-200"
                               style="color: #9d2235;"
                               onmouseover="this.style.color='#7a1a29'"
                               onmouseout="this.style.color='#9d2235'"
                               title="{% trans 'Change Password' %}">
                                <i class="fas fa-key"></i>
                            </a>

                            <!-- Toggle Status Button -->
                            {% if user.is_active %}
                                <form method="post" action="{% url 'account_toggle_status' user.pk %}" class="inline-block">
                                    {% csrf_token %}
                                    <button type="submit" 
                                            class="inline-flex items-center gap-1 px-3 py-1 rounded-lg text-sm font-medium transition-colors duration-200"
                                            style="background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb;"
                                            onmouseover="this.style.backgroundColor='#f5c6cb'"
                                            onmouseout="this.style.backgroundColor='#f8d7da'"
                                            title="{% trans 'Deactivate User' %}">
                                        <i class="fas fa-times-circle"></i>
                                        <span>{% trans "Deactivate" %}</span>
                                    </button>
                                </form>
                            {% else %}
                                <form method="post" action="{% url 'account_toggle_status' user.pk %}" class="inline-block">
                                    {% csrf_token %}
                                    <button type="submit" 
                                            class="inline-flex items-center gap-1 px-3 py-1 rounded-lg text-sm font-medium transition-colors duration-200"
                                            style="background-color: rgba(157, 34, 53, 0.15); color: #9d2235; border: 1px solid rgba(157, 34, 53, 0.2);"
                                            onmouseover="this.style.backgroundColor='rgba(157, 34, 53, 0.25)'"
                                            onmouseout="this.style.backgroundColor='rgba(157, 34, 53, 0.15)'"
                                            title="{% trans 'Activate User' %}">
                                        <i class="fas fa-check-circle"></i>
                                        <span>{% trans "Activate" %}</span>
                                    </button>
                                </form>
                            {% endif %}
                        </div>
                    </td>
                </tr>
                {% empty %}
                <tr>
                    <td colspan="7" class="py-8 text-center text-gray-500 text-sm">
                        {% trans "No staff users found." %}
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    
    <!-- Pagination -->
    <div class="mt-6">
        {% include "includes/paginator.html" %}
    </div>
</div>

{% endblock %}