<div class="page-margin">
   <div class="row">
      <div class="col-md-8">
         <div class="list-group">
            <div class="list-group-item">
               <i class="fa fa-fw fa-users"></i> <?php echo $wo['lang']['create_new_group'];?>
               <span class="<?php echo Wo_RightToLeft('pull-right');?>">
               <a href="<?php echo Wo_SeoLink('index.php?tab1=groups');?>"><i class="fa fa-fw fa-arrow-circle-left"></i><?php echo $wo['lang']['my_groups'];?></a>
               </span>
               <div class="clear"></div>
            </div>
            <div class="setting-well">
               <form class="create-group-form form-horizontal" method="post">
                  <fieldset>
                     <div class="app-general-alert setting-update-alert"></div>
                     <!-- Text input-->
                     <div class="form-group">
                        <label class="col-md-3" for="group_name"><?php echo $wo['lang']['group_name'];?> *</label>  
                        <div class="col-md-6">
                           <input id="group_name" name="group_name" type="text" class="form-control input-md">
                           <span class="help-block">(e.g <?php echo $wo['config']['site_url'];?>/GROUPNAME)</span>
                        </div>
                     </div>
                     <div class="form-group">
                        <label class="col-md-3" for="group_title"><?php echo $wo['lang']['group_title'];?> *</label>  
                        <div class="col-md-6">
                           <input name="group_title" id="group_title" type="text" class="form-control input-md">
                           <span class="help-block"><?php echo $wo['lang']['your_page_title'];?></span>
                        </div>
                     </div>
                     <div class="form-group">
                        <label class="col-md-3" for="category"><?php echo $wo['lang']['category'];?> *</label>  
                        <div class="col-md-6">
                           <select name="category" id="category" class="form-control">
                              <?php foreach ($wo['page_categories'] as $category_id => $category_name) {?>
                              <option value="<?php echo $category_id?>"><?php echo $category_name; ?></option>
                              <?php } ?>
                           </select>
                        </div>
                     </div>
                     <div class="form-group">
                        <label class="col-md-3" for="about"><?php echo $wo['lang']['about'];?></label>  
                        <div class="col-md-6">
                           <textarea name="about" id="" rows="3" class="form-control input-md"></textarea>
                        </div>
                     </div>
                     <hr>
                     <div class="form-group last-btn">
                        <label class="col-md-3"></label>
                        <div class="col-sm-3">
                           <button type="submit" class="form-control btn btn-main">
                           <i class="fa fa-plus-square progress-icon" data-icon="plus-square"></i> <?php echo $wo['lang']['create'];?>
                           </button>
                        </div>
                     </div>
                  </fieldset>
               </form>
            </div>
         </div>
      </div>
      <!-- .col-md-8 -->
      <?php echo Wo_LoadPage('sidebar/content');?>
   </div>
   <!-- .row -->
</div>
<!-- .page-margin -->
<script type="text/javascript">
   $(function() {
   
     $('form.create-group-form').ajaxForm({
   
       url: Wo_Ajax_Requests_File() + '?f=groups&s=create_group',
      
       beforeSend: function() {
   
         Wo_progressIconLoader($('form.create-group-form').find('button'));
   
       },
      
       success: function(data) {
   
         scrollToTop();
   
         if (data.status == 200) {
   
           window.location.href = data.location;
   
         } else {
   
             var errors = data.errors.join("<br>");
   
             $('.app-general-alert').html('<div class="alert alert-danger">' + errors + '</div>');
   
             $('.alert-danger').fadeIn(300);
   
         }
   
         Wo_progressIconLoader($('form.create-group-form').find('button'));
   
       }
   
     });
   
   });
</script>