<!--
#   Copyright © 2021,2022 IsardVDI S.L.
#
#   This file is part of DD
#
#   DD is free software: you can redistribute it and/or modify
#   it under the terms of the GNU Affero General Public License as published by
#   the Free Software Foundation, either version 3 of the License, or (at your
#   option) any later version.
#
#   DD is distributed in the hope that it will be useful, but WITHOUT ANY
#   WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
#   FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
#   details.
#
#   You should have received a copy of the GNU Affero General Public License
#   along with DD. If not, see <https://www.gnu.org/licenses/>.
#
# SPDX-License-Identifier: AGPL-3.0-or-later
-->
<div class="modal fade" id="modalAddUser" tabindex="-1" role="dialog" aria-labelledby="modalAddUser" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <!-- Modal Header -->
      <div class="modal-header">   
        <button type="button" class="close" data-dismiss="modal">
          <span aria-hidden="true">&times;</span>
          <span class="sr-only">Close</span>
        </button>
        <h4 class="modal-title" id="myModalLabel">
          <i class="fa fa-plus fa-1x"> </i> <i class="fa fa-user"> </i> Add new user
        </h4>
      </div>
      
      <!-- Modal Body -->
      <div class="modal-body">
          
        <form id="modalAddUserForm" class="form-inline form-label-left"> 
          <div class="x_panel">
            <div class="x_content">
              <div class="row">
                <div class="col-md-12 col-sm-12 col-xs-12">
                  <label>Enabled</label>
                  <div class="checkbox">
                    <label class="">
                      <div class="icheckbox_flat-green" style="position: relative;">
                        <input type="checkbox" id="enabled" name="enabled" class="flat"  style="position: absolute; opacity: 0;">
                        <ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;">
                        </ins>
                      </div>
                    </label>
                  </div>
                </div>
              </div>
            </div>
            <div class="x_title">
              <h4><i class="fa fa-info-circle" aria-hidden="true"></i> User info</h4>
              <div class="clearfix"></div>
            </div>  
            <div class="x_content" style="padding: 0px;">
              <div class="row">
                <div class="col-md-6 col-xs-12">
                  <label class="control-label" for="name">Username <span class="required">*</span>
                  </label>
                  <input id="username" class="roundbox" maxlength="40" pattern="^[-_.a-z0-9]+$" data-parsley-length="[4, 40]" name="username" placeholder="Username" data-parsley-trigger="change" required type="text" style="width:100%">
                </div>
                <div class="col-md-6 col-xs-12">
                  <label class="control-label" for="email">Email <span class="required">*</span>
                  </label>
                  <input id="email" class="roundbox" data-validate-length-range="4,40" name="email" placeholder="Email" type="email" data-parsley-trigger="change" style="width:100%" required>
                </div>
              </div>
              <div class="row">
                <div class="col-md-6 col-xs-12">
                  <label class="control-label" for="first">First name <span class="required">*</span>
                  </label>
                  <input id="first" class="roundbox" name="first" placeholder="First name"  type="text" style="width:100%" required>
                </div>
                <div class="col-md-6 col-xs-12">
                  <label class="control-label" for="last">Last name <span class="required">*</span>
                  </label>
                  <input id="last" class="roundbox" name="last" placeholder="Last name"  type="text" style="width:100%" required>
                </div>
              </div>
              <div class="row">
                <div class="col-md-6 col-xs-12">
                  <label class="control-label" for="quota">Quota <span class="required">*</span>
                  </label>
                  <select class="roundbox" name="quota" style="width:100%" required>
                    <option value="500 MB">500 MB</option>
                    <option value="1 GB">1 GB</option>
                    <option value="3 GB">3 GB</option>
                    <option value="5 GB">5 GB</option>
                    <option value=false>Unlimited</option>
                  </select>
                </div>
                <div class="col-md-6 col-xs-12">
                  <label class="control-label" for="password">Password <span class="required">*</span>
                  </label>
                  <input id="password" class="roundbox" name="password" placeholder="Password"  type="text" style="width:100%"
                        data-parsley-minlength="10"
                        data-parsley-uppercase="2"
                        data-parsley-lowercase="2"
                        required>
                </div>
              </div>
            </div>
          </div>
          <div class="x_panel">
            <div class="x_title">
              <h4><i class="fa fa-users" aria-hidden="true"></i> Groups</h4>
              <div class="clearfix"></div>
            </div>  
            <div class="x_content" style="padding: 0px;">
              <div class="row">
                <div class="col-md-12 col-xs-12">
                  <label class="control-label" for="id">Select group(s) 
                  </label>
                  <select class="groups-select roundbox" name="groups[]" multiple="multiple" style="width:100%" required>
                  </select>
                </div>
              </div>
            </div>
          </div>
          <div class="x_panel">
            <div class="x_title">
              <h4><i class="fa fa-user-secret" aria-hidden="true"></i> Role</h4>
              <div class="clearfix"></div>
            </div>  
            <div class="x_content" style="padding: 0px;">
              <div class="row">
                <!-- <div class="col-md-4 col-xs-12">
                  <label class="control-label" for="id">Moodle 
                  </label>
                  <select class="role-moodle-select" name="moodle" style="width:100%">
                  </select>
                </div>
                <div class="col-md-4 col-xs-12">
                  <label class="control-label" for="id">Nextcloud 
                  </label>
                  <select class="role-nextcloud-select" name="nextcloud" style="width:100%">
                  </select>
                </div> -->
                <div class="col-md-12 col-xs-12">
                  <label class="control-label" for="id">Select role 
                  </label>
                  <select class="role-keycloak-select" name="role" style="width:100%" required>
                  </select>
                </div>
              </div>
            </div>
          </div>
        </form>
        <!-- Modal Footer -->
        <div class="modal-footer">
          <ul class="nav navbar-left panel_toolbox">
            <li><button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button></li>
          </ul>
          <ul class="nav navbar-right panel_toolbox">
            <li><button id="send" type="button" class="btn btn-success">Create user</button></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="modalPasswdUser" tabindex="-1" role="dialog" aria-labelledby="modalPasswdUser" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <!-- Modal Header -->
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">
          <span aria-hidden="true">&times;</span>
          <span class="sr-only">Close</span>
        </button>
        <h4 class="modal-title" id="myModalLabel">
          <i class="fa fa-plus fa-1x"> </i> <i class="fa fa-key"> </i> Change user password
        </h4>
      </div>
      <!-- Modal Body -->
      <div class="modal-body">
        <form id="modalPasswdUserForm" class="form-inline form-label-left">
          <div class="x_panel">
            <div class="x_title">
              <h4>REMEMBER TO COPY THIS PASSWORD AS IT IS THE ONLY TIME YOU WILL SEE IT</h4>
              <div class="clearfix"></div>
            </div>
            <div class="x_content" style="padding: 0px;">
              <div class="row">
                <div class="col-md-12 col-xs-12">
                  This is a proposed password. Change it for the desired one for this user. <br>
                </div>
              </div>
              <div class="row">
                <div class="col-md-12 col-xs-12">
                  <input id="id" hidden/>
                  <label class="control-label" for="password">Password <span class="required">*</span>
                  </label>
                  <input id="password" class="roundbox" name="password" placeholder="Password" data-parsley-trigger="change" required type="text" style="width:100%">
                </div>
              </div>
            </div>
          </div>
        </form>
        <!-- Modal Footer -->
        <div class="modal-footer">
          <ul class="nav navbar-left panel_toolbox">
            <li><button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button></li>
          </ul>
          <ul class="nav navbar-right panel_toolbox">
            <li><button id="send" type="button" class="btn btn-success">Change user password</button></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="modalEditUser" tabindex="-1" role="dialog" aria-labelledby="modalEditUser" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <!-- Modal Header -->
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">
          <span aria-hidden="true">&times;</span>
          <span class="sr-only">Close</span>
        </button>
        <h4 class="modal-title" id="myModalLabel">
          <i class="fa fa-plus fa-1x"> </i> <i class="fa fa-user"> </i> Edit user
        </h4>
      </div>
      <!-- Modal Body -->
      <div class="modal-body">
        <form id="modalEditUserForm" class="form-inline form-label-left">
          <div class="x_panel">
            <div class="x_content">
              <div class="row">
                <div class="col-md-12 col-sm-12 col-xs-12">
                  <label>Enabled</label>
                  <div class="checkbox">
                    <label class="">
                      <div class="icheckbox_flat-green" style="position: relative;">
                        <input type="checkbox" id="enabled" name="enabled" class="flat"  style="position: absolute; opacity: 0;">
                        <ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;">
                        </ins>
                      </div>
                    </label>
                  </div>
                </div>
              </div>
            </div>
            <div class="x_title">
              <h4><i class="fa fa-info-circle" aria-hidden="true"></i> User info</h4>
              <div class="clearfix"></div>
            </div>
            <div class="x_content" style="padding: 0px;">
              <input id="id" hidden/>
              <div class="row">
                <div class="col-md-2 col-sm-2 col-xs-12 text-center">
                  <img id="user-avatar" src="" width="100" height="100"/>
                </div>
                <div class="col-md-10 col-sm-10 col-xs-12">
                  <div class="row">
                    <div class="row">
                      <div class="col-md-6 col-xs-12">
                        <label class="control-label" for="name">Username <span class="required">*</span>
                        </label>
                        <input disabled id="username" class="roundbox" maxlength="40" pattern="^[-_àèìòùáéíóúñçÀÈÌÒÙÁÉÍÓÚÑÇ .a-zA-Z0-9]+$" data-parsley-length="[4, 40]" name="name" placeholder="Username" data-parsley-trigger="change" required type="text" style="width:100%">
                      </div>
                      <div class="col-md-6 col-xs-12">
                        <label class="control-label" for="email">Email <span class="required">*</span>
                        </label>
                        <input id="email" class="roundbox" data-validate-length-range="4,40" name="email" placeholder="Email" type="email" data-parsley-trigger="change" style="width:100%">
                      </div>
                    </div>
                    <div class="row">
                      <div class="col-md-6 col-xs-12">
                        <label class="control-label" for="firstname">First name <span class="required">*</span>
                        </label>
                        <input id="firstname" class="roundbox" name="firstname" placeholder="First name"  type="text" style="width:100%">
                      </div>
                      <div class="col-md-6 col-xs-12">
                        <label class="control-label" for="lastname">Last name <span class="required">*</span>
                        </label>
                        <input id="lastname" class="roundbox" name="lastname" placeholder="First name"  type="text" style="width:100%">
                      </div>
                    </div>
                    <div class="row">
                      <div class="col-md-6 col-xs-12">
                        <label class="control-label" for="quota">Quota <span class="required">*</span>
                        </label>
                        <select class="roundbox" id="quota" name="quota" style="width:100%" required>
                          <option value="500 MB">500 MB</option>
                          <option value="1 GB">1 GB</option>
                          <option value="3 GB">3 GB</option>
                          <option value="5 GB">5 GB</option>
                          <option value=false>Unlimited</option>
                        </select>
                      </div>
                    </div>

                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="x_panel">
            <div class="x_title">
              <h4><i class="fa fa-users" aria-hidden="true"></i> Groups</h4>
              <div class="clearfix"></div>
            </div>  
            <div class="x_content" style="padding: 0px;">
              <div class="row">
                <div class="col-md-12 col-xs-12">
                  <label class="control-label" for="id">Select group(s) 
                  </label>
                  <select class="groups-select roundbox" name="groups[]" multiple="multiple" style="width:100%">
                  </select>
                </div>
              </div>
            </div>
          </div>
          <div class="x_panel">
            <div class="x_title">
              <h4><i class="fa fa-user-secret" aria-hidden="true"></i> Roles</h4>
              <div class="clearfix"></div>
            </div>
            <div class="x_content" style="padding: 0px;">
              <div class="row">
                <!-- <div class="col-md-4 col-xs-12">
                  <label class="control-label" for="id">Moodle</label>
                  <select class="role-moodle-select" name="moodle" style="width:100%">
                  </select>
                </div>
                <div class="col-md-4 col-xs-12">
                  <label class="control-label" for="id">Nextcloud</label>
                  <select class="role-nextcloud-select" name="nextcloud" style="width:100%">
                  </select>
                </div> -->
                <div class="col-md-12 col-xs-12">
                  <label class="control-label" for="id">Role</label>
                  <select class="role-keycloak-select roundbox" name="role-keycloak" style="width:100%">
                  </select>
                </div>
              </div>
            </div>
          </div>
        </form>
        <!-- Modal Footer -->
        <div class="modal-footer">
          <ul class="nav navbar-left panel_toolbox">
            <li><button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button></li>
          </ul>
          <ul class="nav navbar-right panel_toolbox">
            <li><button id="send" type="button" class="btn btn-success">Edit user</button></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>