{% extends 'base.html' %}

{% block title %}Staff Dashboard{% endblock %}

{% block content %}
<div class="mb-8">
    <div class="flex items-center mb-4">
        <span class="text-4xl mr-3">👨‍💼</span>
        <div>
            <h1 class="text-3xl font-bold text-gray-900">Staff Dashboard</h1>
            <p class="text-lg text-gray-600">Staff management panel</p>
        </div>
    </div>
</div>

<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
    <div class="bg-white rounded-lg shadow-lg border border-gray-200 hover:shadow-xl transition-shadow duration-200">
        <div class="px-6 py-8 text-center">
            <h3 class="text-xl font-semibold text-gray-900 mb-3">User Support</h3>
            <p class="text-gray-600 mb-6">Assist users with account and technical issues</p>
            <a href="#" class="bg-black text-white px-6 py-2 rounded-md hover:bg-gray-800 transition-colors duration-200 inline-block">
                Support Center
            </a>
        </div>
    </div>
    
    <div class="bg-white rounded-lg shadow-lg border border-gray-200 hover:shadow-xl transition-shadow duration-200">
        <div class="px-6 py-8 text-center">
            <h3 class="text-xl font-semibold text-gray-900 mb-3">Content Management</h3>
            <p class="text-gray-600 mb-6">Manage and moderate platform content</p>
            <a href="#" class="bg-black text-white px-6 py-2 rounded-md hover:bg-gray-800 transition-colors duration-200 inline-block">
                Content Panel
            </a>
        </div>
    </div>
</div>

<div class="bg-white rounded-lg shadow-lg border border-gray-200">
    <div class="px-6 py-4 border-b border-gray-200">
        <h2 class="text-xl font-semibold text-gray-900">Staff Information</h2>
    </div>
    <div class="px-6 py-6">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
            <div>
                <h3 class="text-lg font-semibold text-gray-900 mb-4">Current User</h3>
                <div class="space-y-3">
                    <p class="text-gray-700">
                        <span class="font-medium text-gray-900">Name:</span> {{ user.full_name|default:user.email }}
                    </p>
                    <p class="text-gray-700">
                        <span class="font-medium text-gray-900">Role:</span> Staff Member
                    </p>
                    <p class="text-gray-700">
                        <span class="font-medium text-gray-900">Department:</span> {{ user.profile.department|default:"General" }}
                    </p>
                </div>
            </div>
            <div>
                <h3 class="text-lg font-semibold text-gray-900 mb-4">Quick Actions</h3>
                <div class="space-y-3">
                    <button class="w-full px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition-colors duration-200 text-left">
                        View Reports
                    </button>
                    <button class="w-full px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition-colors duration-200 text-left">
                        Export Data
                    </button>
                    <button class="w-full px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition-colors duration-200 text-left">
                        Send Notifications
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}