{% extends '/admin/authenticated/layout/base.html.twig' %}

{% import '/admin/components/helpers_macro.html.twig' as helpers %}


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

{% block css %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('/dist/css/admin_css_datatable_css.css') }}">
    <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.3.0/css/responsive.bootstrap4.min.css">
{% endblock %}


{% block content %}

    {{ helpers.notifications_success() }}
    {{ helpers.notifications_error() }}
    {{ helpers.notifications_warning() }}


    <div class="card card-outline card-primary">
        <div class="card-header card-header-compressed">
            <strong class="font-20">Users</strong>
            <div class="card-tools">
                <a href="{{ path('bo_user_create') }}" class="btn btn-sm btn-success">
                    <i class="fas fa-plus"></i>
                    Create user
                </a>
            </div>
        </div>
        <div id="tableListUserContainer" class="card-body table-responsive d-none">
            <table data-is-datatable="true"
                   class="table table-hover text-nowrap"
                   data-container="#tableListUserContainer">
                <thead>
                <tr>
                    <th>Username</th>
                    <th>Role</th>
                    <th>Status</th>
                    <th></th>
                </tr>
                </thead>
                <tbody>
                {% for user in users %}
                    <tr id="userRow-{{ user.id }}"
                        data-email="{{ user.email }}"
                        data-url-remove="{{ path('bo_user_remove', {id: user.id}) }}">
                        <td>{{ user.email }}</td>
                        <td>
                            {% for roleId in user.roles %}
                                {% set roleById = rolesMap[roleId] %}
                                <div>
                                    <span class="badge badge-{{ roleById.color }} y-badge">{{ roleById.label }}</span>
                                </div>
                            {% endfor %}
                        </td>
                        <td>
                            <strong>
                                {% if user.active %}
                                    <i class="fa-solid fa-circle-check text-success" title="Active"></i>
                                {% else %}
                                    <i class="fa-solid fa-circle times text-danger" title="Active"></i>
                                {% endif %}
                            </strong>
                        </td>
                        <td>
                            <div class="text-right">
                                <a href="{{ path('bo_user_edit', {id: user.id}) }}" class="btn btn-outline-info btn-xs"
                                   type="button" title="Edit">
                                    <i class="fa-solid fa-pen"></i>
                                </a>
                                <button class="btn btn-outline-danger btn-xs btnRemoveUserFromList"
                                        type="button"

                                        {{ app.user and app.user.id == user.id ? 'disabled' }}
                                        title="Delete">
                                    <i class="fa-solid fa-trash"></i>
                                </button>
                            </div>
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    <div class="modal fade"
         id="modalDeleteUser"
         tabindex="-1"
         aria-labelledby="modalDeleteUserLabel"
         aria-hidden="true">
        <div class="modal-dialog">
            <form data-id="formBusiness">
                <div class="modal-content">
                    <div class="modal-header bg-gradient-danger pt-1 pb-1">
                        <span class="modal-title" data-id="modal-title" id="modalDeleteUserLabel">Delete user</span>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div id="modalDeleteUserConfirmationText" class="col text-center" data-id="modal-body">
                                Do you accept to delete the item?
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer p-1">
                        <div class="w-100 text-center">
                            <button id="btnSubmitModalDeleteUser" data-id="modal-ok-button" type="button"
                                    class="btn btn-danger btn-sm m-0 btn-admin">Delete
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>

    {{ helpers.form_processing() }}
{% endblock %}

{% block js %}
    {{ parent() }}
    <script src="{{ asset('/dist/js/admin_js_datatable_js.js') }}"></script>
    <script src="https://cdn.datatables.net/responsive/2.3.0/js/dataTables.responsive.min.js"></script>

    <script src="{{ asset('/app/admin/js/authenticated/security/user/UserList.js') }}"></script>

    <script>
        (new UserList()).init();
    </script>
{% endblock %}