{% 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;">
            </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="Add_helpBlock" 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>
          </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>