{% extends "view/layout.html.twig" %}
{% block title %} User | CRM BIVTeam {% endblock %}
{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('bootstrap-4.4.1/css/bootstrap-select.min.css') }}">
{% endblock %}
{% block body %}
    <div class="container-fluid mt-2">
        {% set titleHelp = "help.title"|trans %}
        {% include 'view/header/_help.html.twig' %}

        <!-- box -->
        <div class="row">
            <div class="col-12 ">
                <div class="content-box content-lighten text-center" data-step="1"
                     data-intro="{{ "help.user.delete.step1"|trans }}">
                    <h1> {{ "user.delete.title"|trans }}</h1>
                    <br>
                    {% if actionCount == 1 %}
                        <h2>{{ actionCount|number_format }} {{ "user.delete.count"|trans }} </h2>
                    {% else %}
                        <h2>{{ actionCount|number_format }} {{ "user.delete.counts"|trans }} </h2>
                    {% endif %}
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-6">
                <div class="content-box content-lighten" data-step="2"
                     data-intro="{{ "help.user.delete.step2"|trans }}">
                    <div class="container mb-5 text-center">
                        <h3>{{ "user.delete.firstOption.title"|trans }}</h3>
                        <p class="mt-3">{{ "user.delete.firstOption.description"|trans }}</p>
                        <button type="button" class="btn btn-info" id="buttonDeleteUser">
                            {{ "user.delete.firstOption.button"|trans }}
                        </button>
                    </div>
                </div>
            </div>
            <div class="col-6">
                <div class="content-box content-lighten" data-step="3"
                     data-intro="{{ "help.user.delete.step3"|trans }}">
                    <div class="container mb-5 text-center">
                        <h3>{{ "user.delete.secondOption.title"|trans }}</h3>
                        <p class="mt-3">{{ "user.delete.secondOption.description"|trans }}</p>
                        <label>
                            <select class="selectpicker" id="selectUsers">
                                <option value="null" selected disabled>Please select</option>
                                {% for userSelect in users %}
                                    {% if userSelect != user %}
                                        <option value="{{ userSelect.id }}"> {{ userSelect }}</option>
                                    {% endif %}
                                {% endfor %}
                            </select>
                        </label><br>
                        <button type="button" class="btn btn-info mt-3" id="buttonAttribute">
                            {{ "user.delete.secondOption.button"|trans }}
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block javascripts %}
    {{ parent() }}
    <script src="{{ asset('bootstrap-4.4.1/js/bootstrap-select.min.js') }}"></script>
    <script src={{ asset('js/signaletique/user/deleteUser.js') }}></script>
{% endblock %}