{% extends 'base.html' %}
{% from "macros.html" import render_field %}

{% block title %}View Users{% endblock %}

{%  block content_title %}Select a user{% endblock %}
{% block content_description %}Select the user you'd like to action upon{% endblock %}

{% block content %}
<h3>Users for Selected Tenant</h3>
<form action="{{ url_for('user_bp.handle_user_action') }}" method="POST">
    <table id="usersTable" class="display" style="width:100%">
        <thead>
            <tr>
                <th>Select</th>
                <th>User ID</th>
                <th>Name</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            {% for user in users %}
            <tr>
                <td><input type="radio" name="user_id" value="{{ user.id }}" required></td>
                <td>{{ user.id }}</td>
                <td>{{ user.name }}</td>
                <td>{{ user.email }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    <div class="form-group mt-3">
        <button type="submit" name="action" value="edit_user" class="btn btn-primary">Edit Selected User</button>
        <!-- Additional buttons can be added here for other actions -->
    </div>
</form>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function() {
    $('#usersTable').DataTable({
        'columnDefs': [{
            'targets': 0,
            'searchable': false,
            'orderable': false,
            'className': 'dt-body-center',
            'render': function (data, type, full, meta){
                return '<input type="radio" name="user_id" value="' + $('<div/>').text(data).html() + '">';
            }
        }],
        'order': [[1, 'asc']]
    });
});
</script>
{% endblock %}