{% extends 'base.html.twig' %}

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

{% block footer %}{% endblock %}

{% block body %}
    {% include 'general/components/navigation_menu_main.html.twig' with { 'activeTab': 'user' } %}

    <div class="table-container">
        <div class="container table-section ">
            <div class="row" style="height: 95%">

                {% if is_granted('ROLE_ADMIN') or is_granted('ROLE_GLOBAL_ADMIN') %}
                        <div class="user-table-buttons-wrap">
                            <div class="add-buttons">
                                <a href="{{ path('app_invitation_index') }}" class="add-button border-0">
                                    <svg class="svg-navigation-menu color-white" width="36" height="36" viewBox="0 0 24 24"
                                        fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M16 4H18C19.1046 4 20 4.89543 20 6V18C20 19.1046 19.1046 20 18 20H6C4.89543 20 4 19.1046 4 18V6C4 4.89543 4.89543 4 6 4H8M16 4C16 2.89543 15.1046 2 14 2H10C8.89543 2 8 2.89543 8 4M16 4C16 5.10457 15.1046 6 14 6H10C8.89543 6 8 5.10457 8 4M12 11V17M9 14H15" 
                                            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                    </svg>
                                    {{ 'lang.invitations' | trans }}
                                </a>

                                {% if amount_users <= max_amount_users %}
                                    <a href="{{ path('app_user_new') }}" class="add-button border-0" id="open-contact-modal-btn" type="button">
                                        <img src="{{ asset('/images/add.svg') }}"/>
                                        {{ 'lang.addUser' | trans }}
                                    </a>
                                {% endif %}
                            </div>
                        </div>

                {% endif %}

                <div class="col h-100">
                    <div class="table-responsive h-100  overflow-visible">
                        <table class="table table-striped table-bordered" id="userTable">
                            <thead class="table-mobile-class">
                            <tr>
                                <th>Email</th>
                                <th>{{ 'lang.role'|trans }}</th>
                                <th>{{ 'lang.name'|trans }}</th>
                                <th>{{ 'lang.surname'|trans }}</th>
                                <th>{{ 'lang.cellphone'|trans }}</th>
                                <th class="text-center">{{ 'lang.twoFactorAuth'|trans }}</th>
                                <th class="text-center">{{ 'lang.edit'|trans }}</th>
                                <th class="text-center">{{ 'lang.delete'|trans }}</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for user in users %}
                                <tr>
                                    {% if 'ROLE_GUEST' in user.roles %}
                                        <td class="rows-mobile">{{ user.email | replace({'#guest': ''}) }}</td>
                                    {% else %}
                                        <td class="rows-mobile">{{ user.email }}</td>
                                    {% endif %}
                                    <td class="rows-mobile">{{ user.primaryRole|getRoleName }}</td>
                                    <td class="rows-mobile-show">
                                        <a href="{{ path('app_user_edit', {'id': user.id}) }}"
                                           class="d-flex d-lg-none">
                                            {{ user.firstName }} {{ user.lastName }}
                                        </a>
                                        <span class="d-none d-lg-block">
												{{ user.firstName }}
											</span>
                                    </td>
                                    <td class="rows-mobile">{{ user.lastName }}</td>
                                    <td class="rows-mobile">{{ user.cellphone }}</td>
                                    <td class="rows-mobile text-center">
                                        {% if user.isEmailAuthEnabled %}
                                            <span class="badge bg-success">{{ 'lang.enabled'|trans }}</span>
                                        {% else %}
                                            <span class="badge bg-secondary">{{ 'lang.disabled'|trans }}</span>
                                        {% endif %}
                                    </td>
                                    <td class="rows-mobile">
                                        {% if is_granted('ROLE_ADMIN') or is_granted('ROLE_GLOBAL_ADMIN') %}
                                            <span class="display-flex-center">
													<a href="{{ path('app_user_edit', {'id': user.id}) }}" class="btn">
														<i class="icofont-edit"></i>
													</a>
												</span>
                                        {% endif %}
                                    </td>
                                    <td class="rows-mobile">
                                        {% if user.isMainAccount is null and app.user.id != user.id %}
                                            {% if is_granted('ROLE_ADMIN') or is_granted('ROLE_GLOBAL_ADMIN') %}
                                                <span class="display-flex-center">
                                                    <a
                                                            class="button-delete-ts btn"
                                                            href="#"
                                                            data-bs-toggle="modal"
                                                            data-bs-target="#deleteConfirmModal"
                                                            data-id="{{ user.id }}"
                                                            data-delete-link="{{ path('app_user_delete', {'id': user.id}) }}"
                                                    >
                                                        <i class="icofont-trash"></i>
                                                    </a>
												</span>
                                            {% endif %}
                                        {% endif %}
                                    </td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="deleteConfirmModal" tabindex="-1" aria-labelledby="deleteConfirmModalLabel"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteConfirmModalLabel">{{ 'lang.deleteConfirm' | trans }}</h5>
                    <button type="button" class="button-no-style" data-bs-dismiss="modal" aria-label="Close">
                        <i class="icofont-close svg-close f-20"></i>
                    </button>
                </div>
                <div class="modal-body">
                    <p>{{ 'lang.areYouSure' | trans }}</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary"
                            data-bs-dismiss="modal">{{ 'lang.cancel' | trans }}</button>
                    <button type="button" class="btn btn-danger"
                            id="confirmDeleteBtn">{{ 'lang.delete' | trans }}</button>
                </div>
            </div>
        </div>
    </div>

{% endblock %}

{% block javascripts %}
    {{ encore_entry_script_tags('user') }}
{% endblock %}