<!--
#   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="modalAddGroup" tabindex="-1" role="dialog" aria-labelledby="modalAddGroup" 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">
          <i class="fa fa-plus fa-1x"> </i> <i class="fa fa-users"> </i> Add new group
        </h4>
      </div>
      
      <!-- Modal Body -->
      <div class="modal-body">
          
        <form id="modalAddGroupForm" class="form-inline form-label-left"> 
          <div class="x_panel">
            <div class="x_title">
              <h4><i class="fa fa-info-circle" aria-hidden="true"></i> Group 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">Name <span class="required">*</span>
                  </label>
                  <input id="name" class="roundbox" maxlength="40" pattern="^[-_àèìòùáéíóúñçÀÈÌÒÙÁÉÍÓÚÑÇ .a-zA-Z0-9]+$" data-parsley-length="[4, 40]" name="name" placeholder="Name" data-parsley-trigger="change" required type="text" style="width:100%">
                </div>
                <div class="col-md-6 col-xs-12">
                  <label class="control-label" for="name">Description <span class="required">*</span>
                  </label>
                  <input id="description" class="roundbox" name="description" placeholder="Description" data-parsley-trigger="change" required type="text" style="width:100%">
                </div>
              </div>
            </div>
          </div>
          <div class="x_panel">
            <div class="x_title">
              <h4><i class="fa fa-users" aria-hidden="true"></i> Parent group</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 parent group 
                  </label>
                  <select class="groups-select roundbox" id="parent" name="parent" 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 group</button></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>
