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

{% 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 %}
<form action="{{ url_for('user_bp.handle_user_action') }}" method="POST">
    {{ render_selectable_table(headers=["User ID", "User Name", "Email"], rows=users, selectable=True, id="usersTable") }}
    <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>
{% endblock %}
{% block scripts %}
<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() + '">';
                }
            },
            {
                'targets': 1,
                'orderable': true,
            },
            {
                'targets': 2,
                'orderable': true,
            },
            {
                'targets': 3,
                'orderable': true,
            }
        ],
        'order': [[1, 'asc']]
    });
});
</script>
{% endblock %}