{% load i18n %}

<div class="modal fade" id="add_modal" tabindex="-1" role="dialog"
     aria-labelledby="mySmallModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content m_content">
            <div class="modal-header m_head" style="color: white;">
                <h4 class="modal-title">{% trans 'Add user' %}</h4>
                <button type="button" data-dismiss="modal" class="close pull-right m_close" aria-label="Close"
                        style="color: white;">
                    <span aria-hidden="true">&times;</span>
                </button>

            </div>
            <div class="modal-body" style="padding: 0px; width: 700px;">
                <form class="form-horizontal" id="add_form" action="" method="POST" autocomplete="off">

                    <div class="form-group">
                        <div class="col-sm-12">
                            <input id="Add_inputEmail" type="email" title="{% trans 'Email' %}" class="form-control"
                                   onkeyup="AddValidMail()"
                                   name="email" placeholder="{% trans 'Email' %}"
                                   style="background-color: #ffffff; border-radius: 0px; border-width: 0px; border-bottom-width: 1px; text-align: center; box-shadow: none;">
                            <span id="addHelpBlockEmail" class="help-block text-center"
                                  style="display: none;">{% trans 'Such an email already exists.' %}</span>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-12">
                            <input type="text" title="{% trans 'WAF ID' %}" class="form-control"
                                   name="waf_alias" placeholder="{% trans 'WAF ID' %}"
                                   style="background-color: #ffffff; border-radius: 0px; border-width: 0px; border-bottom-width: 1px; text-align: center; box-shadow: none;">
                        </div>
                    </div>
                    <div class="form-group" id="Add_PasswordForm">
                        <div class="col-sm-12">
                            <div class="input-group display-flex" title="{% trans 'Password' %}">
                                <input id="Add_inputPassword" type="password" autocomplete="off" class="form-control"
                                       onkeyup="Add_checkPasswords()"
                                       name="password" placeholder="{% trans 'Password' %}"
                                       style="background-color: #ffffff; border-radius: 0px; border-width: 0px; border-bottom-width: 1px; text-align: center; box-shadow: none; padding-left: 52px;">
                                <span class="input-group-addon custom-addon"
                                      style="background-color: #ffffff; border-width: 0px; border-bottom-width: 1px; border-radius: 0px;"><i
                                        onclick="Add_showPassword()" id="Add_PasswordEye" class="fa fa-eye-slash"
                                        aria-hidden="true"></i></span>
                            </div>
                        </div>
                    </div>
                    <div class="form-group" id="Add_ConfirmPasswordForm">
                        <div class="col-sm-12">
                            <div class="input-group display-flex" title="{% trans 'Confirmation' %}">
                                <input id="Add_inputConfirmPassword" type="password" class="form-control"
                                       name="password_confirm"
                                       placeholder="{% trans 'Confirmation' %}" onkeyup="Add_checkPasswords()"
                                       style="background-color: #ffffff; border-radius: 0px; border-width: 0px; border-bottom-width: 1px; text-align: center; box-shadow: none; padding-left: 52px;">
                                <span class="input-group-addon custom-addon"
                                      style=" background-color: #ffffff; border-width: 0px; border-bottom-width: 1px; border-radius: 0px;"><i
                                        onclick="Add_showPassword()" id="Add_ConfirmPasswordEye" class="fa fa-eye-slash"
                                        aria-hidden="true"></i></span>
                            </div>
                            <span id="addHelpBlockPass" class="help-block text-center"
                                  style="display: none;">{% trans 'Password does not match.' %}</span>
                        </div>
                    </div>
                    <div>
                        <div class="col-sm-12">
                            <div class="btn-group form-group dropdown-select" title="{% trans 'Role' %}"
                                 style="background-color: #ffffff; border-color: #ffffff; border-width: 0px; box-shadow: none;">
                                <button type="button" id="Add_dropdownRoleMenuButton"
                                        class="btn btn-secondary dropdown-toggle"
                                        data-toggle="dropdown"
                                        style="z-index: 10;  background-color: #ffffff !important; border-color: #ffffff; border-width: 0px; text-align: center; box-shadow: none; border-bottom-width: 1px; border-radius: 0px;">{% trans 'User' %}</button>
                                <ul class="dropdown-menu" aria-labelledby="Add_dropdownRoleMenuButton" role="menu"
                                    style="z-index: 9; border-top: 20px solid #ffffff !important; margin-top: 10px">
                                    <li role="menuitem"><a class="dropdown-item"
                                                           onclick="Add_setRole('{% trans 'User' %}')">{% trans 'User' %}</a>
                                    </li>
                                    <!--<li role="menuitem"><a class="dropdown-item" href="#" (click)="user.role = 1">Administrator</a></li>-->
                                    <li role="menuitem"><a class="dropdown-item"
                                                           onclick="Add_setRole('{% trans 'Administrator' %}')">{% trans 'Administrator' %}</a>
                                    </li>
                                </ul>
                                <input form="add_form" name="role" class="form-control" id="AddRoleInput" type="hidden"
                                       value="{% trans 'User' %}">
                            </div>
                        </div>
                    </div>
                    <div>
                        <div class="col-sm-12">
                            <div class="btn-group form-group dropdown-select" title="{% trans 'Status' %}"
                                 style="background-color: #ffffff; border-color: #ffffff; border-width: 0px; box-shadow: none;">
                                <button type="button" id="Add_dropdownStatusMenuButton"
                                        class="btn btn-primary dropdown-toggle"
                                        data-toggle="dropdown"
                                        style="z-index: 6; background-color: #ffffff !important; border-color: #ffffff; border-width: 0px; text-align: center;  border-bottom-width: 1px; border-radius: 0px;">{% trans 'Active' %}</button>
                                <ul class="dropdown-menu control-label" aria-labelledby="Add_dropdownStatusMenuButton"
                                    role="menu"
                                    style="z-index: 5; border-top: 20px solid #ffffff !important; margin-top: 10px">
                                    <li role="menuitem"><a class="dropdown-item"
                                                           onclick="Add_setStatus('{% trans 'Active' %}')">{% trans 'Active' %}</a>
                                    </li>
                                    <li role="menuitem"><a class="dropdown-item"
                                                           onclick="Add_setStatus('{% trans 'Inactive' %}')">{% trans 'Inactive' %}</a>
                                    </li>
                                </ul>
                                <input form="add_form" name="status" class="form-control" id="AddStatusInput"
                                       type="hidden"
                                       value="{% trans 'Active' %}">
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-12">
                            <input type="text" title="{% trans 'WAF domains' %}" class="form-control"
                                   name="domain" placeholder="{% trans 'WAF domains' %}"
                                   style="background-color: #ffffff; border-radius: 0px; border-width: 0px; border-bottom-width: 1px; text-align: center; box-shadow: none;">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-12">
                            <input type="text" title="{% trans 'Access restricted by IP' %}" class="form-control"
                                   name="acl" placeholder="{% trans 'Access restricted by IP' %}"
                                   style="background-color: #ffffff; border-radius: 0px; border-width: 0px; border-bottom-width: 1px; text-align: center; box-shadow: none;">
                        </div>
                    </div>
                    <div class="form-group block-modules">
                        <div class="col-sm-4"
                             style="padding-top: 10px; padding-left: 20px; font-size: 16px; text-align: start;">
                            <span style="">{% trans 'Modules:' %}</span>
                        </div>
                        <div class="col-sm-8" style=" ">
                            <div style="display: flex; justify-content: space-between; flex-direction: row; align-items: center;">
                                <span style="margin-right: 30px; margin-left: 20px;">{% trans 'CSVReport' %}</span>
                                <label class="switch" style="padding-top: 5px; margin-right: 20px;">
                                    <input name="csv_report" title="{% trans 'CSVReport' %}" type="checkbox">
                                    <span class="slider round"></span>
                                </label>
                            </div>
                            <div style="display: flex; justify-content: space-between; flex-direction: row; align-items: center;">
                                <span style="margin-right: 30px; margin-left: 20px;">{% trans 'PDFReport' %}</span>
                                <label class="switch" style="padding-top: 5px; margin-right: 20px;">
                                    <input name="pdf_report" title="{% trans 'PDFReport' %}" type="checkbox">
                                    <span class="slider round"></span>
                                </label>
                            </div>

                            <div style="display: flex; justify-content: space-between; flex-direction: row; align-items: center;">
                                <span style="margin-right: 30px; margin-left: 20px;">{% trans 'OpenAPI (OA)' %}</span>
                                <label class="switch" style="padding-top: 5px; margin-right: 20px;">
                                    <input name="oa_toggle" title="{% trans 'OpenAPI (OA)' %}" type="checkbox">
                                    <span class="slider round"></span>
                                </label>
                            </div>
                            <div style="display: flex; justify-content: space-between; flex-direction: row; align-items: center;">
                                <span style="margin-right: 30px; margin-left: 20px;">{% trans 'WAF Settings (WS)' %}</span>
                                <label class="switch" style="padding-top: 5px; margin-right: 20px;">
                                    <input name="ws_toggle" title="{% trans 'WAF Settings (WS)' %}" type="checkbox">
                                    <span class="slider round"></span>
                                </label>
                            </div>
                            <div style="display: flex; justify-content: space-between; flex-direction: row; align-items: center;">
                                <span style="margin-right: 30px; margin-left: 20px;">{% trans 'Model Tuning (MT)' %}</span>
                                <label class="switch" style="padding-top: 5px; margin-right: 20px;">
                                    <input name="mt_toggle" title="{% trans 'Model Tuning (MT)' %}" type="checkbox">
                                    <span class="slider round"></span>
                                </label>
                            </div>
                            <div style="display: flex; justify-content: space-between; flex-direction: row; align-items: center;">
                                <span style="margin-right: 30px; margin-left: 20px; white-space:nowrap;">{% trans 'EC' %}&nbsp;(EC)</span>
                                <label class="switch" style="padding-top: 5px; postiton: relative; right:20px;">
                                    <input name="ec_toggle" style='position:absolute;' title="{% trans 'EC' %}"
                                           type="checkbox">
                                    <span class="slider round"></span>
                                </label>
                            </div>


                        </div>
                    </div>


                    <div class="form-group m_foot">
                        <button id="Add_SaveButton" onclick="send_request_to_add_user()" data-dismiss="modal"
                                style="border-style: none; background: none;"
                                class="btn btn-default m_btn save_button">{% trans 'Save' %}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>