{% set template_title = "C4S_B2B_USER_MANAGER"|translate %}

{% set blUseUserRoleFunction = oViewConf.isFunctionalityEnabled("C4S_b2b_user_manager_useUserRoleFunction") %}
{% set blUseUserAuthFunction = oViewConf.isFunctionalityEnabled("C4S_b2b_user_manager_useUserAuthorizationFunction") %}
{% set blUseNewUserFunction = oViewConf.isFunctionalityEnabled("C4S_b2b_user_manager_useNewUserFunction") %}

{% capture append = "oxidBlock_title" %}
    <h1 class="c4s-account-page-header">{{ template_title }}</h1>
{% endcapture %}

{% capture append = "oxidBlock_content" %}
    {% if oxcmp_user.hasB2BAccount() %}
        {% if oxcmp_user.isAccountSuperAdmin() or oxcmp_user.isAccountAdmin() %}
            {% set oB2BAccount = oxcmp_user.getB2BAccount() %}
            {% set aConfigAuthGroupIds = oB2BAccount.getConfigAuthGroupIds() %}

            {% block c4s_user_manager_styles %}
                {# vendor styles #}
                {% if "c4s" in oViewConf.getActiveTheme() and not oViewConf.getViewThemeParam("blUseCDN") %}
                    {{ style({ include: "libs/datatables/css/datatables-bootstrap5.min.css" }) }}
                    {{ style({ include: "libs/datatables/css/datatables-responsive-bootstrap5.min.css" }) }}
                    {{ style({ include: "libs/datatables/css/datatables-fixed-columns-bootstrap5.min.css" }) }}
                {% else %}
                    {{ style({ include: "https://cdn.datatables.net/1.13.1/css/dataTables.bootstrap5.min.css" }) }}
                    {{ style({ include: "https://cdn.datatables.net/responsive/2.4.0/css/responsive.bootstrap5.min.css" }) }}
                    {{ style({ include: "https://cdn.datatables.net/fixedcolumns/4.2.1/css/fixedColumns.bootstrap5.min.css" }) }}
                {% endif %}

                {# c4s styles #}
                {{ style({ include: oViewConf.getVersionedModuleUrl('c4s_b2b_user_manager', 'out/src/css/c4s_b2b_user_manager.css')}) }}
            {% endblock %}

            {% block c4s_user_manager_scripts %}
                {# vendor scripts #}
                {% if "c4s" in oViewConf.getActiveTheme() and not oViewConf.getViewThemeParam("blUseCDN") %}
                    {{ script({ include: "libs/datatables/js/jquery.min.js", priority: 5, dynamic: __oxid_include_dynamic }) }} {# todo: datatables without jQuery? #}
                    {{ script({ include: "libs/datatables/js/datatables.min.js", priority: 10, dynamic: __oxid_include_dynamic }) }}
                    {{ script({ include: "libs/datatables/js/datatables-bootstrap5.min.js", priority: 10, dynamic: __oxid_include_dynamic }) }}
                    {{ script({ include: "libs/datatables/js/datatables-responsive.min.js", priority: 10, dynamic: __oxid_include_dynamic }) }}
                    {{ script({ include: "libs/datatables/js/datatables-responsive-bootstrap5.min.js", priority: 10, dynamic: __oxid_include_dynamic }) }}
                    {{ script({ include: "libs/datatables/js/datatables-fixed-columns.min.js", priority: 10, dynamic: __oxid_include_dynamic }) }}
                {% else %}
                    {{ script({ include: "https://code.jquery.com/jquery-3.6.0.min.js", priority: 5, dynamic: __oxid_include_dynamic }) }}
                    {{ script({ include: "https://cdn.datatables.net/1.13.1/js/jquery.dataTables.min.js", priority: 10, dynamic: __oxid_include_dynamic }) }}
                    {{ script({ include: "https://cdn.datatables.net/1.13.1/js/dataTables.bootstrap5.min.js", priority: 10, dynamic: __oxid_include_dynamic }) }}
                    {{ script({ include: "https://cdn.datatables.net/responsive/2.4.0/js/dataTables.responsive.min.js", priority: 10, dynamic: __oxid_include_dynamic }) }}
                    {{ script({ include: "https://cdn.datatables.net/responsive/2.4.0/js/responsive.bootstrap5.min.js", priority: 10, dynamic: __oxid_include_dynamic }) }}
                    {{ script({ include: "https://cdn.datatables.net/fixedcolumns/4.2.1/js/dataTables.fixedColumns.min.js", priority: 10, dynamic: __oxid_include_dynamic }) }}
                {% endif %}

                {# c4s scripts #}
                {{ script({ include: oViewConf.getVersionedModuleUrl("c4s_b2b_user_manager", "out/src/js/c4s_b2b_user_auth_manager.js"), priority: 11, dynamic: __oxid_include_dynamic }) }}
                {{ script({ include: oViewConf.getVersionedModuleUrl("c4s_b2b_user_manager", "out/src/js/c4s_b2b_user_role_manager.js"), priority: 11, dynamic: __oxid_include_dynamic }) }}
                {{ script({ include: "js/details_dropdown_responsive.min.js", priority: 12, dynamic: __oxid_include_dynamic }) }}
            {% endblock %}

            {% set sUserListTitle = "C4S_B2B_USER_MANAGER_USER_LIST"|translate %}
            {% set sUserAuthrizationTitle = "C4S_B2B_USER_MANAGER_AUTHORIZATIONS"|translate %}
            {% set sAddUserTitle = "C4S_B2B_USER_MANAGER_ADD_USER"|translate %}

            {% block c4s_b2b_user_manager_info %}
                {% ifcontent ident "c4s_b2b_user_manager_info" set oCont %}
                    <div class="c4s-user-manager-info" data-snippet-ident="c4s_b2b_user_manager_info">
                        {{ oCont.oxcontents__oxcontent.value }}
                        {% ifcontent ident "c4s_b2b_user_manager_info_icon" set oContent %}
                            <div class="info"
                                  data-snippet-ident="c4s_b2b_user_manager_info_icon"
                                  data-bs-toggle="popover"
                                  data-bs-container="body"
                                  data-bs-trigger="hover click"
                                  data-bs-placement="bottom"
                                  data-bs-html="true"
                                  data-bs-content='{{ oContent.oxcontents__oxcontent.value }}'
                                  title="{{ oContent.oxcontents__oxtitle.value }}"
                            ><i class="fa-solid fa-lg fa-question-circle"></i>
                            </div>
                        {% endifcontent %}
                    </div>
                {% endifcontent %}
            {% endblock %}

            {% if oB2BAccount.getAllB2BAccountUsers(true)|length > 0 %}
                <div id="c4s-b2b-user-manager" class="c4s-b2b-user-manager tabbedWidgetBox">
                    <ul id="c4s-details-tabs"  class="nav nav-tabs c4s-details-tabs">
                        {% block c4s_b2b_user_manager_tabs %}
                            {% if blUseUserRoleFunction %}
                                <li class="nav-item d-none d-md-block c4s-details-tab-header" data-text="{{ sUserListTitle }}">
                                    <a href="#c4s-user-manager-tab-users" class="nav-link active" data-bs-toggle="tab">{{ sUserListTitle }}</a>
                                </li>
                            {% endif %}
                            {% if blUseUserAuthFunction and aConfigAuthGroupIds %}
                                <li class="nav-item d-none d-md-block c4s-details-tab-header" data-text="{{ sUserAuthrizationTitle }}">
                                    <a href="#c4s-user-manager-tab-auths" class="nav-link" data-bs-toggle="tab">{{ sUserAuthrizationTitle }}</a>
                                </li>
                            {% endif %}
                            {% if blUseNewUserFunction %}
                                <li class="nav-item d-none d-md-block c4s-details-tab-header" data-text="{{ sAddUserTitle }}">
                                    <a href="#c4s-user-manager-tab-add-user" class="nav-link" data-bs-toggle="tab">{{ sAddUserTitle }}</a>
                                </li>
                            {% endif %}
                        {% endblock %}

                        <li class="dropdown d-md-none">
                            <a class="nav-link dropdown-toggle c4s-dropdown-top active" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">
                                <span class="c4s-dropdown-top-text">{{ sUserListTitle }}</span>
                                <i class="fa-solid fa-angle-down"></i>
                            </a>
                            <ul id="c4s-details-tab-dropdown" class="dropdown-menu c4s-details-tab-dropdown">
                                {% block c4s_b2b_user_manager_mobile_tabs %}
                                    {% if blUseUserRoleFunction %}
                                        <li data-text="{{ sUserListTitle }}">
                                            <a href="#c4s-user-manager-tab-users" class="dropdown-item nav-link active" data-bs-toggle="tab">{{ sUserListTitle }}</a>
                                        </li>
                                    {% endif %}
                                    {% if blUseUserAuthFunction and aConfigAuthGroupIds %}
                                        <li class="user-manager-auth-dropdown" data-text="{{ sUserAuthrizationTitle }}">
                                            <a href="#c4s-user-manager-tab-auths"  class="dropdown-item nav-link" data-bs-toggle="tab">{{ sUserAuthrizationTitle }}</a>
                                        </li>
                                    {% endif %}
                                    {% if blUseNewUserFunction %}
                                        <li data-text="{{ sAddUserTitle }}">
                                            <a href="#c4s-user-manager-tab-add-user" class="dropdown-item nav-link" data-bs-toggle="tab">{{ sAddUserTitle }}</a>
                                        </li>
                                    {% endif %}
                                {% endblock %}
                            </ul>
                        </li>
                    </ul>

                    <div id="c4s-details-tabs-content" class="tab-content c4s-details-tabs-content">
                        {% block c4s_b2b_user_manager_content %}
                            {% if blUseUserRoleFunction %}
                                <div class="tab-pane fade show active" id="c4s-user-manager-tab-users" role="tabpanel">
                                    {% block c4s_b2b_user_manager_user_role_content %}
                                        {% include "@c4s_b2b_user_manager/page/account/inc/c4s_b2b_user_manager_user_roles.html.twig" %}
                                    {% endblock %}
                                </div>
                            {% endif %}
                            {% if blUseUserAuthFunction and aConfigAuthGroupIds %}
                                <div class="tab-pane fade" id="c4s-user-manager-tab-auths" role="tabpanel">
                                    {% block c4s_b2b_user_manager_user_auth_content %}
                                        {% include "@c4s_b2b_user_manager/page/account/inc/c4s_b2b_user_manager_user_auth.html.twig" %}
                                    {% endblock %}
                                </div>
                            {% endif %}
                            {% if blUseNewUserFunction %}
                                <div class="tab-pane fade" id="c4s-user-manager-tab-add-user" role="tabpanel">
                                    {% block c4s_b2b_user_manager_add_user_content %}
                                        {% include "@c4s_b2b_user_manager/page/account/inc/c4s_b2b_user_manager_add_user.html.twig" %}
                                    {% endblock %}
                                </div>
                            {% endif %}
                        {% endblock %}
                    </div>
                </div>
            {% else %}
                <div class="alert alert-warning" data-snippet-ident="c4s_b2b_user_manager_nouser">
                    {% ifcontent ident "c4s_b2b_user_manager_nouser" set oCont %}
                       {{ oCont.oxcontents__oxcontent.value }}
                    {% endifcontent %}
                </div>
            {% endif %}
        {% else %}
            <div class="alert alert-warning">
                {{ translate({ ident: "C4S_B2B_USER_MANAGER_ERROR_NOT_ADMIN" }) }}
            </div>
        {% endif %}
    {% endif %}
    {{ insert_tracker({title: template_title}) }}
{% endcapture %}

{# user manager user modals #}
{% capture append = "oxidBlock_pageModal" %}
    {% block c4s_user_manager_modals %}
        {% if blUseNewUserFunction %}
            {% include "@c4s_b2b_user_manager/page/account/inc/c4s_b2b_user_manager_modal_feedback.html.twig" %}
        {% endif %}
    {% endblock %}
{% endcapture %}

{% capture append = "oxidBlock_sidebar" %}
    {% include "page/account/inc/account_menu.html.twig" with {active_link: "c4s_b2b_user_manager"} %}
{% endcapture %}

{% include "layout/page.html.twig" with {sidebar: "left", blHideBreadcrumb: true} %}