{% extends "base.html" %}

{% block title %}Settings{% endblock %}

{% block content %}
<div class="card">
    <h3>Manage Users</h3>
    <ul class="user-list">
        {% for user in users %}
        <li data-user-id="{{ user.id }}">
            <span class="user-name">{{ user.username }}</span>
            <span class="user-role">Role: {{ user.role }}</span>
            <button class="btn edit-btn">Edit Rights</button>
            <button class="btn delete-btn">Delete User</button>
        </li>
        {% endfor %}
    </ul>
    <button id="create-user-btn" class="btn create-btn">Create User</button>
</div>

<!-- Popup for creating a new user -->
<div id="create-user-popup" class="popup">
    <div class="popup-content">
        <h3>Create User</h3>
        <form id="create-user-form" method="POST" action="{{ url_for('main.create_user') }}">
            <label for="username">Username:</label>
            <input type="text" id="username" name="username" required>
            <label for="password">Password:</label>
            <input type="password" id="password" name="password" required>
            <label for="role">Role:</label>
            <select id="role" name="role" required>
                <option value="superadmin">Superadmin</option>
                <option value="administrator">Administrator</option>
                <option value="quality">Quality</option>
                <option value="warehouse">Warehouse</option>
                <option value="scan">Scan</option>
            </select>
            <button type="submit" class="btn">Create</button>
            <button type="button" id="close-popup-btn" class="btn cancel-btn">Cancel</button>
        </form>
    </div>
</div>

<!-- Popup for editing a user -->
<div id="edit-user-popup" class="popup">
    <div class="popup-content">
        <h3>Edit User</h3>
        <form id="edit-user-form" method="POST" action="{{ url_for('main.edit_user') }}">
            <input type="hidden" id="edit-user-id" name="user_id">
            <label for="edit-username">Username:</label>
            <input type="text" id="edit-username" name="username" readonly>
            <label for="edit-password">New Password:</label>
            <input type="password" id="edit-password" name="password">
            <label for="edit-role">Role:</label>
            <select id="edit-role" name="role" required>
                <option value="superadmin">Superadmin</option>
                <option value="administrator">Administrator</option>
                <option value="quality">Quality</option>
                <option value="warehouse">Warehouse</option>
                <option value="scan">Scan</option>
            </select>
            <button type="submit" class="btn">Update</button>
            <button type="button" id="close-edit-popup-btn" class="btn cancel-btn">Cancel</button>
        </form>
    </div>
</div>

<!-- Popup for confirming user deletion -->
<div id="delete-user-popup" class="popup">
    <div class="popup-content">
        <h3>Do you really want to delete the user <span id="delete-username"></span>?</h3>
        <form id="delete-user-form" method="POST" action="{{ url_for('main.delete_user') }}">
            <input type="hidden" id="delete-user-id" name="user_id">
            <button type="submit" class="btn delete-confirm-btn">Yes</button>
            <button type="button" id="close-delete-popup-btn" class="btn cancel-btn">No</button>
        </form>
    </div>
</div>
{% endblock %}