{extends 'layout.latte'}

{block content}
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="mb-4">
                    <h1>Dashboard</h1>
                    <p class="text-muted">Welcome back, {$user["name"]|capitalize}!</p>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-8">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title mb-0">Recent Activity</h3>
                    </div>
                    <div class="card-body">
                        {if $activities && count($activities) > 0}
                        <div class="table-responsive">
                            <table class="table table-striped">
                                <thead>
                                    <tr>
                                        <th>Date</th>
                                        <th>Activity</th>
                                        <th>Status</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {foreach $activities as $activity}
                                    <tr>
                                        <td>{$activity['date']}</td>
                                        <td>{$activity['name']}</td>
                                        <td>
                                            {if $activity['status'] === 'completed'}
                                                <span class="badge bg-success">Completed</span>
                                            {elseif $activity['status'] === 'pending'}
                                                <span class="badge bg-warning">Pending</span>
                                            {elseif $activity['status'] === 'in_progress'}
                                                <span class="badge bg-info">In Progress</span>
                                            {/if}
                                        </td>
                                    </tr>
                                    {/foreach}
                                </tbody>
                            </table>
                        </div>
                        {else}
                        <div class="text-center py-4">
                            <p class="text-muted mb-0">No recent activities to display.</p>
                        </div>
                        {/if}
                    </div>
                </div>
            </div>

            <div class="col-lg-4">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title mb-0">Quick Actions</h3>
                    </div>
                    <div class="card-body">
                        <button type="button" class="btn btn-primary w-100 mb-2">Add New User</button>
                        <button type="button" class="btn btn-success w-100 mb-2">Generate Report</button>
                        <button type="button" class="btn btn-warning w-100 mb-2">View Analytics</button>
                        <button type="button" class="btn btn-info w-100">Settings</button>
                    </div>
                </div>
            </div>
        </div>
        <footer class="fixed-bottom bg-light border-top py-2 mt-4">
            <div class="container-fluid text-center">
                <small class="text-muted">Page rendered at: {time()|date:'Y-m-d H:i:s'}</small>
            </div>
        </footer>
    </div>
{/block}