<div class="page-margin">
   <div class="row">
      <div class="col-md-8">
         <div class="wowonder-well">
            <form class="create-page-form form-horizontal" method="post">
               <fieldset>
                  <legend>
                     <span class="<?php echo Wo_RightToLeft('pull-left');?>">
                     <i class="fa fa-flag"></i> <?php echo $wo['lang']['create_new_page'];?>
                     </span>
                     <span class="<?php echo Wo_RightToLeft('pull-right');?>">
                     <a href="<?php echo Wo_SeoLink('index.php?tab1=pages');?>" class="btn btn-default"><i class="fa fa-arrow-circle-left"></i> <?php echo $wo['lang']['my_pages'];?></a>
                     </span>
                     <div class="clear"></div>
                  </legend>
                  <div class="app-general-alert setting-update-alert"></div>
                  <!-- Text input-->
                  <div class="form-group">
                     <label class="col-md-3" for="page_name"><?php echo $wo['lang']['page_name'];?> *</label>  
                     <div class="col-md-6">
                        <input id="page_name" name="page_name" type="text" class="form-control input-md">
                        <span class="help-block">(e.g http://www.wowonder.com/p/PAGENAME)</span>
                     </div>
                  </div>
                  <div class="form-group">
                     <label class="col-md-3" for="page_title"><?php echo $wo['lang']['page_title'];?> *</label>  
                     <div class="col-md-6">
                        <input name="page_title" id="page_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="page_category"><?php echo $wo['lang']['page_category'];?> *</label>  
                     <div class="col-md-6">
                        <select name="page_category" id="page_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="page_description"><?php echo $wo['lang']['page_description'];?> *</label>  
                     <div class="col-md-6">
                        <textarea name="page_description" id="" rows="3" class="form-control input-md"></textarea>
                        <span class="help-block"><?php echo $wo['lang']['page_description_info'];?></span>
                     </div>
                  </div>
                  <hr>
                  <div class="form-group">
                     <label class="col-md-3"></label>
                     <div class="col-sm-3 text-left">
                        <button type="submit" name="save_setting" id="save-setting" tabindex="4" value="Save" class="form-control btn btn-danger">
                        <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>
      <!-- .col-md-8 -->
      <?php echo Wo_LoadPage('sidebar/content');?>
   </div>
   <!-- .row -->
</div>
<!-- .page-margin -->
<script type="text/javascript">
$(function() {

  $('form.create-page-form').ajaxForm({

    url: Wo_Ajax_Requests_File() + '?f=pages&s=create_page',
   
    beforeSend: function() {

      Wo_progressIconLoader($('form.create-page-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-page-form').find('button'));

    }

  });

});
</script>