{% extends "base.html" %}

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

{% block content %}
<div class="card-container">
    <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>

    <div class="card">
        <h3>External Server Settings</h3>
        <form method="POST" action="{{ url_for('main.save_external_db') }}" class="form-centered">
            <label for="server_domain">Server Domain/IP Address:</label>
            <input type="text" id="server_domain" name="server_domain" value="{{ external_settings.get('server_domain', '') }}" required>
            <label for="port">Port:</label>
            <input type="number" id="port" name="port" value="{{ external_settings.get('port', '') }}" required>
            <label for="database_name">Database Name:</label>
            <input type="text" id="database_name" name="database_name" value="{{ external_settings.get('database_name', '') }}" required>
            <label for="username">Username:</label>
            <input type="text" id="username" name="username" value="{{ external_settings.get('username', '') }}" required>
            <label for="password">Password:</label>
            <input type="password" id="password" name="password" value="{{ external_settings.get('password', '') }}" required>
            <button type="submit" class="btn">Save/Update External Database Info Settings</button>
        </form>
    </div>
</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 %}