{% extends "base.html" %}

{% block title %}Admin - LinkSync{% endblock %}

{% block content %}
<div class="page-header">
    <h1>User Management</h1>
    <button class="btn btn-primary" id="new-user-btn">+ New User</button>
</div>

<div id="users-list" class="users-table">
    <div class="loading">Loading users...</div>
</div>

<div id="user-modal" class="modal" style="display: none;">
    <div class="modal-overlay"></div>
    <div class="modal-content">
        <div class="modal-header">
            <h2 id="user-modal-title">Create User</h2>
            <button class="modal-close" id="user-modal-close">&times;</button>
        </div>
        <form id="user-form">
            <input type="hidden" id="user-id">
            <div class="form-group">
                <label for="user-username">Username *</label>
                <input type="text" id="user-username" required>
            </div>
            <div class="form-group">
                <label for="user-email">Email *</label>
                <input type="email" id="user-email" required>
            </div>
            <div class="form-group">
                <label for="user-password">Password *</label>
                <input type="password" id="user-password" required>
            </div>
            <div class="form-group">
                <label for="user-role">Role</label>
                <select id="user-role">
                    <option value="user">User</option>
                    <option value="admin">Admin</option>
                </select>
            </div>
            <div class="form-group checkbox-group">
                <label>
                    <input type="checkbox" id="user-active" checked>
                    Active
                </label>
            </div>
            <div class="form-actions">
                <button type="button" class="btn btn-secondary" id="user-cancel-btn">Cancel</button>
                <button type="submit" class="btn btn-primary" id="user-save-btn">Save</button>
            </div>
        </form>
    </div>
</div>

<div id="delete-user-modal" class="modal" style="display: none;">
    <div class="modal-overlay"></div>
    <div class="modal-content modal-sm">
        <h2>Delete User</h2>
        <p>Are you sure you want to delete this user? This action cannot be undone.</p>
        <div class="form-actions">
            <button class="btn btn-secondary" id="delete-user-cancel-btn">Cancel</button>
            <button class="btn btn-danger" id="confirm-delete-user-btn">Delete</button>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="/static/js/admin-page.js?v={{ build_id }}"></script>
{% endblock %}