{% extends 'dashboards/base_dashboard.html' %}

{% block extra_css %}
<style>
    /* Modern Card Styles */
    .stat-card {
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        border: none;
        border-radius: 10px;
        overflow: hidden;
        position: relative;
        background: linear-gradient(145deg, #ffffff, #f8f9fc);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
        border-left: 5px solid transparent;
    }
    
    .stat-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    }
    
    .stat-card.primary { 
        border-left-color: #4e73df;
        background: linear-gradient(145deg, #f8f9fc, #f0f4ff);
    }
    .stat-card.success { 
        border-left-color: #1cc88a;
        background: linear-gradient(145deg, #f8f9fc, #f0fdf4);
    }
    .stat-card.info { 
        border-left-color: #36b9cc;
        background: linear-gradient(145deg, #f8f9fc, #f0f9ff);
    }
    .stat-card.warning { 
        border-left-color: #f6c23e;
        background: linear-gradient(145deg, #f8f9fc, #fffbeb);
    }
    .stat-card.danger { 
        border-left-color: #e74a3b;
        background: linear-gradient(145deg, #f8f9fc, #fef2f2);
    }
    
    .stat-card .stat-icon {
        font-size: 2.5rem;
        opacity: 0.2;
        position: absolute;
        right: 1.5rem;
        top: 1.5rem;
        transition: all 0.3s ease;
    }
    
    .stat-card:hover .stat-icon {
        transform: scale(1.1);
        opacity: 0.3;
    }
    
    .stat-card .card-body {
        padding: 1.5rem;
        position: relative;
        z-index: 2;
    }
    
    .stat-card .card-title {
        color: #5a5c69;
        font-size: 0.9rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 0.5rem;
    }
    
    .stat-card .card-value {
        color: #2e2f37;
        font-size: 1.75rem;
        font-weight: 700;
        margin: 0.5rem 0;
        line-height: 1.2;
    }
    
    .stat-card .card-change {
        font-size: 0.85rem;
        display: flex;
        align-items: center;
        margin-top: 0.5rem;
    }
    
    .stat-card .change-positive {
        color: #1cc88a;
    }
    
    .stat-card .change-negative {
        color: #e74a3b;
    }
    
    /* Progress bars */
    .progress {
        height: 8px;
        border-radius: 4px;
        margin: 1rem 0 0.5rem;
        background-color: #eaecf4;
        overflow: visible;
    }
    
    .progress-bar {
        border-radius: 4px;
        position: relative;
        overflow: visible;
    }
    
    .progress-bar::after {
        content: '';
        position: absolute;
        right: -4px;
        top: -2px;
        width: 8px;
        height: 12px;
        border-radius: 4px;
        background: inherit;
        opacity: 0.8;
    }
    
    /* Chart containers */
    .chart-container {
        position: relative;
        height: 300px;
        background: white;
        border-radius: 10px;
        padding: 1.5rem;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
        transition: all 0.3s ease;
    }
    
    .chart-container:hover {
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    }
    
    /* Section headers */
    .section-header {
        padding: 1.25rem 1.5rem;
        background: white;
        border-bottom: 1px solid #e3e6f0;
        border-radius: 10px 10px 0 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .section-header .section-title {
        font-size: 1.1rem;
        font-weight: 700;
        color: #4e73df;
        margin: 0;
    }
    
    /* Task cards */
    .task-card {
        border: 1px solid #e3e6f0;
        border-radius: 8px;
        margin-bottom: 1rem;
        transition: all 0.3s ease;
    }
    
    .task-card:hover {
        transform: translateX(5px);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    }
    
    .task-card .task-priority {
        width: 4px;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        border-radius: 8px 0 0 8px;
    }
    
    .task-card .task-priority.high { background-color: #e74a3b; }
    .task-card .task-priority.medium { background-color: #f6c23e; }
    .task-card .task-priority.low { background-color: #36b9cc; }
    
    /* Responsive adjustments */
    @media (max-width: 768px) {
        .stat-card {
            margin-bottom: 1.5rem;
        }
        
        .stat-card .stat-icon {
            font-size: 2rem;
            right: 1rem;
            top: 1rem;
        }
        
        .chart-container {
            margin-bottom: 1.5rem;
        }
    }
</style>
{% endblock %}

{% block extra_js %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
{{ monthly_data_json|json_script:"monthlyData" }}
{{ department_data_json|json_script:"departmentData" }}
<script>
    // Auto-refresh the page every 5 minutes to keep data fresh
    setTimeout(function() {
        window.location.reload(1);
    }, 300000);  // 300000 ms = 5 minutes

    // Initialize tooltips
    $(document).ready(function() {
        $('[data-toggle="tooltip"]').tooltip();
        
        // Handle approve/reject buttons
        $('.approve-task, .reject-task').on('click', function(e) {
            e.preventDefault();
            const taskId = $(this).data('task-id');
            const action = $(this).hasClass('approve-task') ? 'approve' : 'reject';
            const $card = $(this).closest('.task-card');
            
            if (action === 'reject') {
                const reason = prompt('Please provide a reason for rejection:');
                if (reason === null) return; // User cancelled
                
                $.post(
                    `/tasks/${taskId}/${action}/`,
                    { csrfmiddlewaretoken: '{{ csrf_token }}', rejection_reason: reason },
                    function(response) {
                        if (response.status === 'success') {
                            $card.fadeOut(300, function() {
                                $(this).remove();
                                if ($('.task-card').length === 0) {
                                    $('#tasks-awaiting-approval').html(
                                        '<div class="alert alert-info mb-0">No tasks awaiting approval.</div>'
                                    );
                                }
                            });
                            showToast('Task rejected successfully', 'success');
                        } else {
                            showToast('Error: ' + response.message, 'error');
                        }
                    }
                ).fail(function() {
                    showToast('Error processing your request', 'error');
                });
            } else {
                $.post(
                    `/tasks/${taskId}/${action}/`,
                    { csrfmiddlewaretoken: '{{ csrf_token }}' },
                    function(response) {
                        if (response.status === 'success') {
                            $card.fadeOut(300, function() {
                                $(this).remove();
                                if ($('.task-card').length === 0) {
                                    $('#tasks-awaiting-approval').html(
                                        '<div class="alert alert-info mb-0">No tasks awaiting approval.</div>'
                                    );
                                }
                            });
                            showToast('Task approved successfully', 'success');
                        } else {
                            showToast('Error: ' + response.message, 'error');
                        }
                    }
                ).fail(function() {
                    showToast('Error processing your request', 'error');
                });
            }
        });
    });
    
    function showToast(message, type = 'info') {
        const toast = `
            <div class="toast align-items-center text-white bg-${type} border-0 position-fixed bottom-0 end-0 m-3" role="alert" aria-live="assertive" aria-atomic="true">
                <div class="d-flex">
                    <div class="toast-body">
                        ${message}
                    </div>
                    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
                </div>
            </div>
        `;
        
        $('.toast').remove();
        $('body').append(toast);
        $('.toast').toast({ autohide: true, delay: 3000 }).toast('show');
    }

    // Initialize charts when document is ready
    $(document).ready(function() {
        // Get data from JSON script tags
        const monthlyTrendData = JSON.parse(document.getElementById('monthlyData').textContent);
        const departmentData = JSON.parse(document.getElementById('departmentData').textContent);
        
        // Monthly Trend Chart
        const trendCtx = document.getElementById('taskTrendChart').getContext('2d');
        const trendChart = new Chart(trendCtx, {
            type: 'line',
            data: {
                labels: monthlyTrendData.map(item => item.month),
                datasets: [
                    {
                        label: 'Total Tasks',
                        data: monthlyTrendData.map(item => item.total),
                        borderColor: 'rgba(78, 115, 223, 1)',
                        backgroundColor: 'rgba(78, 115, 223, 0.1)',
                        tension: 0.3,
                        fill: true
                    },
                    {
                        label: 'Completed Tasks',
                        data: monthlyTrendData.map(item => item.completed),
                        borderColor: 'rgba(28, 200, 138, 1)',
                        backgroundColor: 'rgba(28, 200, 138, 0.1)',
                        tension: 0.3,
                        fill: true
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'top',
                    },
                    tooltip: {
                        mode: 'index',
                        intersect: false,
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: {
                            stepSize: 1
                        }
                    }
                }
            }
        });

        // Department Distribution Chart
        const deptCtx = document.getElementById('departmentDistribution').getContext('2d');
        const deptChart = new Chart(deptCtx, {
            type: 'doughnut',
            data: {
                labels: departmentData.map(dept => dept.name),
                datasets: [{
                    data: departmentData.map(dept => dept.total),
                    backgroundColor: [
                        'rgba(78, 115, 223, 0.8)',
                        'rgba(28, 200, 138, 0.8)',
                        'rgba(54, 185, 204, 0.8)',
                        'rgba(246, 194, 62, 0.8)',
                        'rgba(231, 74, 59, 0.8)',
                        'rgba(153, 102, 255, 0.8)',
                        'rgba(255, 159, 64, 0.8)'
                    ],
                    borderColor: [
                        'rgba(78, 115, 223, 1)',
                        'rgba(28, 200, 138, 1)',
                        'rgba(54, 185, 204, 1)',
                        'rgba(246, 194, 62, 1)',
                        'rgba(231, 74, 59, 1)',
                        'rgba(153, 102, 255, 1)',
                        'rgba(255, 159, 64, 1)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'right',
                    },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                const label = context.label || '';
                                const value = context.raw || 0;
                                const total = context.dataset.data.reduce((a, b) => a + b, 0);
                                const percentage = Math.round((value / total) * 100);
                                return `${label}: ${value} (${percentage}%)`;
                            }
                        }
                    }
                },
                cutout: '60%',
            }
        });

        // Make charts responsive
        window.addEventListener('resize', function() {
            trendChart.resize();
            deptChart.resize();
        });
    });
</script>
{% endblock %}

{% block stats %}
<!-- Dashboard Header -->
<div class="d-flex flex-column flex-md-row justify-content-between align-items-center mb-4">
    <div>
        <h1 class="h3 mb-1 text-gray-800">Welcome back, {{ request.user.get_full_name|default:request.user.username }}!</h1>
        <p class="text-muted">Here's what's happening with your tasks today</p>
    </div>
    <div class="mt-3 mt-md-0">
        <div class="btn-group" role="group">
            <a href="{% url 'tasks:task-create' %}" class="btn btn-primary">
                <i class="fas fa-plus me-2"></i>Create Task
            </a>
            <a href="{% url 'reports:generate' %}" class="btn btn-outline-secondary ms-2">
                <i class="fas fa-file-pdf me-2"></i>Generate Report
            </a>
        </div>
    </div>
</div>

<!-- Stats Cards -->
<div class="row mb-4">
    <!-- Total Tasks -->
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card stat-card primary h-100">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h6 class="card-title mb-0">Total Tasks</h6>
                    <i class="fas fa-tasks text-primary"></i>
                </div>
                <h2 class="card-value mb-2">{{ total_tasks }}</h2>
                <div class="progress">
                    <div class="progress-bar bg-primary" role="progressbar" 
                         style="width: 100%" 
                         aria-valuenow="100" 
                         aria-valuemin="0" 
                         aria-valuemax="100">
                    </div>
                </div>
                <p class="text-muted small mt-2 mb-0">
                    <i class="fas fa-circle text-primary me-1"></i> 
                    {{ completion_rate|default:0 }}% completion rate
                </p>
            </div>
        </div>
    </div>

    <!-- Completed Tasks -->
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card stat-card success h-100">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h6 class="card-title mb-0">Completed</h6>
                    <i class="fas fa-check-circle text-success"></i>
                </div>
                <div class="d-flex align-items-baseline">
                    <h2 class="card-value mb-0">{{ completed_tasks }}</h2>
                    <span class="ms-2 text-success small">
                        <i class="fas fa-arrow-up"></i> {{ completion_rate|floatformat:0 }}%
                    </span>
                </div>
                <div class="progress mt-3">
                    <div class="progress-bar bg-success" role="progressbar" 
                         style="width: {{ completion_rate|default:0 }}%" 
                         aria-valuenow="{{ completion_rate|default:0 }}" 
                         aria-valuemin="0" 
                         aria-valuemax="100">
                    </div>
                </div>
                <p class="text-muted small mt-2 mb-0">
                    <i class="fas fa-calendar-week me-1"></i>
                    {{ completed_this_week }} this week
                </p>
            </div>
        </div>
    </div>
    
    <!-- Pending Tasks -->
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card stat-card warning h-100">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h6 class="card-title mb-0">In Progress</h6>
                    <i class="fas fa-clock text-warning"></i>
                </div>
                <div class="d-flex align-items-baseline">
                    <h2 class="card-value mb-0">{{ pending_tasks }}</h2>
                    <span class="ms-2 text-warning small">
                        <i class="fas fa-exclamation-circle"></i> {{ high_priority_tasks|length }} high
                    </span>
                </div>
                <div class="progress mt-3">
                    <div class="progress-bar bg-warning" role="progressbar" 
                         style="width: {% widthratio pending_tasks total_tasks 100 %}%" 
                         aria-valuenow="{{ pending_tasks }}" 
                         aria-valuemin="0" 
                         aria-valuemax="{{ total_tasks }}">
                        {% widthratio pending_tasks total_tasks 100 %}%
                    </div>
                </div>
                <p class="text-muted small mt-2 mb-0">
                    <i class="fas fa-tasks me-1"></i>
                    {{ pending_tasks }} tasks in progress
                </p>
            </div>
        </div>
    </div>
    
    <!-- Active Departments -->
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card stat-card info h-100">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h6 class="card-title mb-0">Departments</h6>
                    <i class="fas fa-building text-info"></i>
                </div>
                <div class="d-flex align-items-baseline">
                    <h2 class="card-value mb-0">{{ active_departments }}</h2>
                    <span class="ms-2 text-info small">
                        <i class="fas fa-chart-line"></i> Active
                    </span>
                </div>
                <div class="progress mt-3">
                    <div class="progress-bar bg-info" role="progressbar" 
                         style="width: {% widthratio active_departments departments.count 100 %}%" 
                         aria-valuenow="{{ active_departments }}" 
                         aria-valuemin="0" 
                         aria-valuemax="{{ departments.count }}">
                        {% widthratio active_departments departments.count 100 %}%
                    </div>
                </div>
                <p class="text-muted small mt-2 mb-0">
                    <i class="fas fa-layer-group me-1"></i>
                    {{ departments.count }} total departments
                </p>
            </div>
        </div>
    </div>
    
    <!-- Active Departments -->
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card stat-card info h-100">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h6 class="card-title mb-0">Departments</h6>
                    <span class="badge bg-info rounded-pill">{{ departments|length }} total</span>
                </div>
                <div class="d-flex align-items-baseline">
                    <h2 class="card-value mb-0">{{ active_departments }}</h2>
                    <span class="ms-2 text-info small">
                        <i class="fas fa-chart-line"></i> Active
                    </span>
                </div>
                <div class="progress mt-3">
                    <div class="progress-bar bg-info" role="progressbar" 
                         style="width: {% widthratio active_departments departments.count 100 %}%" 
                         aria-valuenow="{{ active_departments }}" 
                         aria-valuemin="0" 
                         aria-valuemax="{{ departments.count }}">
                        {% widthratio active_departments departments.count 100 %}%
                    </div>
                </div>
                <p class="text-muted small mt-2 mb-0">
                    <i class="fas fa-layer-group me-1"></i>
                    {{ departments.count }} total departments
                </p>
            </div>
        </div>
    </div>
</div>

<!-- Charts Row -->
<div class="row mb-4">
    <!-- Task Trend Chart -->
    <div class="col-xl-8 mb-4">
        <div class="card shadow h-100">
            <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                <h6 class="m-0 font-weight-bold text-primary">Task Completion Trend (Last 6 Months)</h6>
            </div>
            <div class="card-body">
                <div class="chart-container">
                    <canvas id="taskTrendChart"></canvas>
                </div>
            </div>
        </div>
    </div>

    <!-- Task Distribution -->
    <div class="col-xl-4 mb-4">
        <div class="card shadow h-100">
            <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                <h6 class="m-0 font-weight-bold text-primary">Task Distribution by Department</h6>
            </div>
            <div class="card-body">
                <div class="chart-container">
                    <canvas id="departmentDistribution"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block left_column %}
<!-- Tasks Awaiting Approval -->
<div class="card shadow mb-4">
    <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
        <h6 class="m-0 font-weight-bold text-warning">Tasks Awaiting Approval</h6>
    </div>
    <div class="card-body" id="tasks-awaiting-approval">
        {% for task in tasks_awaiting_approval %}
        <div class="card mb-3 task-card">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-start">
                    <div>
                        <h5 class="card-title mb-1">
                            <a href="{% url 'tasks:task-detail' task.id %}">{{ task.title }}</a>
                            <span class="badge bg-{% if task.priority == 'high' %}danger{% elif task.priority == 'medium' %}warning text-dark{% else %}secondary{% endif %} ms-2">
                                {{ task.get_priority_display }}
                            </span>
                            {% if task.scope == 'national' %}
                            <span class="badge bg-primary ms-1">National Level</span>
                            {% endif %}
                        </h5>
                        <p class="text-muted small mb-2">
                            Created by: {{ task.created_by.get_full_name|default:task.created_by.username }} | 
                            Due: {{ task.due_date|date:"M d, Y"|default:"No due date" }}
                        </p>
                        <p class="card-text">{{ task.description|truncatewords:20 }}</p>
                    </div>
                    <div class="btn-group" role="group">
                        <button type="button" class="btn btn-sm btn-success approve-task" data-task-id="{{ task.id }}">
                            <i class="fas fa-check"></i> Approve
                        </button>
                        <button type="button" class="btn btn-sm btn-danger reject-task" data-task-id="{{ task.id }}">
                            <i class="fas fa-times"></i> Reject
                        </button>
                    </div>
                </div>
                {% if task.rejection_reason %}
                <div class="alert alert-warning p-2 mt-2 mb-0 small">
                    <strong>Previous Rejection Reason:</strong> {{ task.rejection_reason }}
                </div>
                {% endif %}
            </div>
        </div>
        {% empty %}
        <div class="alert alert-info mb-0">No tasks awaiting approval.</div>
        {% endfor %}
    </div>
        <div class="table-responsive">
            <table class="table table-bordered table-hover" width="100%" cellspacing="0">
                <thead class="table-light">
                    <tr>
                        <th>Title</th>
                        <th>Department</th>
                        <th>Assigned To</th>
                        <th>Due Date</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for task in tasks_awaiting_approval %}
                    <tr>
                        <td>{{ task.title }}</td>
                        <td>{{ task.assigned_to.department.name|default:"-" }}</td>
                        <td>{{ task.assigned_to.get_full_name|default:task.assigned_to.email }}</td>
                        <td>{{ task.due_date|date:"M d, Y" }}</td>
                        <td class="text-center">
                            <a href="{% url 'tasks:task-detail' task.id %}" class="btn btn-sm btn-info" title="View">
                                <i class="fas fa-eye"></i>
                            </a>
                            <a href="{% url 'tasks:task-approve' task.id %}" class="btn btn-sm btn-success" title="Approve">
                                <i class="fas fa-check"></i>
                            </a>
                            <a href="{% url 'tasks:task-reject' task.id %}" class="btn btn-sm btn-danger" title="Reject">
                                <i class="fas fa-times"></i>
                            </a>
                        </td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="5" class="text-center">No tasks awaiting approval</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- High Priority Tasks -->
<div class="card shadow mb-4">
    <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
        <h6 class="m-0 font-weight-bold text-danger">High Priority Tasks</h6>
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-bordered table-hover" width="100%" cellspacing="0">
                <thead class="table-light">
                    <tr>
                        <th>Title</th>
                        <th>Department</th>
                        <th>Assigned To</th>
                        <th>Due Date</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>
                    {% for task in high_priority_tasks %}
                    <tr>
                        <td>{{ task.title }}</td>
                        <td>{{ task.assigned_to.department.name|default:"-" }}</td>
                        <td>{{ task.assigned_to.get_full_name|default:task.assigned_to.email }}</td>
                        <td>{{ task.due_date|date:"M d, Y" }}</td>
                        <td><span class="badge {% if task.status == 'completed' %}bg-success{% else %}bg-warning{% endif %}">
                            {{ task.get_status_display }}
                        </span></td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="5" class="text-center">No high priority tasks</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Recent Tasks -->
<div class="card shadow mb-4">
    <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
        <h6 class="m-0 font-weight-bold text-primary">Recent Tasks</h6>
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-bordered" width="100%" cellspacing="0">
                <thead>
                    <tr>
                        <th>Title</th>
                        <th>Department</th>
                        <th>Assigned To</th>
                        <th>Status</th>
                        <th>Due Date</th>
                    </tr>
                </thead>
                <tbody>
                    {% for task in recent_tasks %}
                    <tr>
                        <td>{{ task.title }}</td>
                        <td>{{ task.assigned_to.department.name|default:"-" }}</td>
                        <td>{{ task.assigned_to.get_full_name|default:task.assigned_to.email }}</td>
                        <td><span class="badge {% if task.status == 'completed' %}bg-success{% else %}bg-warning{% endif %}">
                            {{ task.get_status_display }}
                        </span></td>
                        <td>{{ task.due_date|date:"M d, Y" }}</td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="5" class="text-center">No tasks found</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}

{% block right_column %}
<!-- Quick Actions -->
<div class="card shadow mb-4">
    <div class="card-header py-3">
        <h6 class="m-0 font-weight-bold text-primary">Quick Actions</h6>
    </div>
    <div class="card-body">
        <div class="d-grid gap-2">
            <div class="btn-group mb-2" role="group">
                <a href="{% url 'users:user_list' %}" class="btn btn-primary">
                    <i class="fas fa-users me-1"></i> Manage Users
                </a>
                <a href="{% url 'users:user_create' %}" class="btn btn-primary" title="Add New User">
                    <i class="fas fa-plus"></i>
                </a>
            </div>
            
            <div class="btn-group mb-2" role="group">
                <a href="{% url 'tasks:task-list' %}" class="btn btn-success">
                    <i class="fas fa-tasks me-1"></i> Manage Tasks
                </a>
                <a href="{% url 'tasks:task-create' %}" class="btn btn-success" title="Create New Task">
                    <i class="fas fa-plus"></i>
                </a>
            </div>
            
            <a href="{% url 'departments:department_list' %}" class="btn btn-warning mb-2">
                <i class="fas fa-building me-1"></i> Manage Departments
            </a>
            
            <a href="{% url 'departments:department_create' %}" class="btn btn-outline-warning mb-2">
                <i class="fas fa-plus-circle me-1"></i> Add New Department
            </a>
            
            <a href="{% url 'reports:generate' %}" class="btn btn-info">
                <i class="fas fa-chart-bar me-1"></i> Generate Performance Report
            </a>
        </div>
    </div>
</div>

<!-- Departments Overview -->
<div class="card shadow mb-4">
    <div class="card-header py-3">
        <h6 class="m-0 font-weight-bold text-primary">Departments Overview</h6>
    </div>
    <div class="card-body">
        <div class="mb-3">
            <div class="small text-gray-500">Total Departments</div>
            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ departments.count }}</div>
        </div>
        <div class="mt-4">
            <h6 class="font-weight-bold">Department List</h6>
            <ul class="list-group list-group-flush">
                {% for dept in departments %}
                <li class="list-group-item d-flex justify-content-between align-items-center px-0">
                    {{ dept.name }}
                    <span class="badge bg-primary rounded-pill">{{ dept.user_set.count }} users</span>
                </li>
                {% empty %}
                <li class="list-group-item">No departments found</li>
                {% endfor %}
            </ul>
        </div>
    </div>
</div>
{% endblock %}
