{% extends "base.html" %}

{% block title %}Users - API Demo{% endblock %}

{% block content %}
<div class="page-header">
    <h1>👥 Users</h1>
    <p>Manage user accounts</p>
</div>

<div class="table-container">
    <table class="data-table">
        <thead>
            <tr>
                <th>ID</th>
                <th>Username</th>
                <th>Email</th>
                <th>Status</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody id="users-table-body">
            <tr>
                <td colspan="5" class="loading">Loading users...</td>
            </tr>
        </tbody>
    </table>
</div>
{% endblock %}

{% block scripts %}
<script>
const API_BASE = '/api';

async function loadUsers() {
    try {
        const response = await fetch(`${API_BASE}/users`);
        const users = await response.json();

        const tbody = document.getElementById('users-table-body');
        tbody.innerHTML = users.map(user => `
            <tr>
                <td>${user.id}</td>
                <td>${user.username}</td>
                <td>${user.email}</td>
                <td>
                    <span class="badge ${user.active ? 'badge-success' : 'badge-danger'}">
                        ${user.active ? 'Active' : 'Inactive'}
                    </span>
                </td>
                <td>
                    <button class="btn btn-sm" onclick="viewUser(${user.id})">View</button>
                </td>
            </tr>
        `).join('');
    } catch (error) {
        console.error('Error loading users:', error);
        document.getElementById('users-table-body').innerHTML =
            '<tr><td colspan="5" class="error">Failed to load users</td></tr>';
    }
}

function viewUser(id) {
    alert(`View user details for ID: ${id}\n\nAPI Endpoint: /api/users/${id}`);
}

loadUsers();
</script>
{% endblock %}