Mini Shell

<% include ../partials/header %>

<% include ../partials/sidebar %>

<div class="app-content content">
  <div class="content-wrapper">
    <div class="content-header row">
    </div>
    <div class="content-body">
      <!-- Breadcrumb starts-->
      <div class="content-header-left col-md-6 col-12 mb-2">
        <h3 class="content-header-title">Role Management</h3>
        <div class="row breadcrumbs-top">
          <div class="breadcrumb-wrapper col-12">
            <ol class="breadcrumb">
              <li class="breadcrumb-item"><a href="/">Dashboard</a>
              </li>
              <li class="breadcrumb-item active">Role Management
              </li>
            </ol>
          </div>
        </div>
      </div>
      <!-- Breadcrumb ends-->

      <div class="content-body">
        <!-- Zero configuration table -->
        <section id="configuration">
          <div class="row">
            <div class="col-12">
              <div class="card">
                <div class="card-header">
                  <h4 class="card-title">Role Management</h4>
                  <a class="heading-elements-toggle"><i class="la la-ellipsis-v font-medium-3"></i></a>
                  <div class="heading-elements">
                    <ul class="list-inline mb-0">
                      <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                      <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                      <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                      <li><a data-action="close"><i class="ft-x"></i></a></li>
                    </ul>
                  </div>
                </div>
                <div class="card-content collapse show">
                  <div class="card-body card-dashboard">
                    <div id="fb-editor"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>
        <!--/ Zero configuration table -->
      </div>
    </div>
  </div>
</div>


<div class="modal fade text-left" id="role" tabindex="-1" role="dialog" aria-labelledby="myModalLabel35" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header bg-success">
        <h3 class="modal-title" id="myModalLabel35"> Create New Role</h3>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <form method="POST" action="/roles">
        <div class="modal-body">
          <fieldset class="form-group floating-label-form-group">
            <label for="name">Role Name</label>
            <input type="text" class="form-control" name="name" id="name" placeholder="Enter Role Name">
          </fieldset>
          <fieldset class="form-group floating-label-form-group">
            <label for="title1">Description</label>
            <textarea class="form-control" name="description" id="description" rows="3" placeholder="Description"></textarea>
          </fieldset>
        </div>
        <div class="modal-footer">
          <input type="reset" class="btn btn-outline-secondary btn-lg" data-dismiss="modal" value="close">
          <input type="submit" class="btn btn-outline-primary btn-lg" value="Save">
        </div>
      </form>
    </div>
  </div>
</div>




<!-- ////////////////////////////////////////////////////////////////////////////-->
<% include ../partials/footer %>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://formbuilder.online/assets/js/form-builder.min.js"></script>
<script>
  jQuery(function ($) {
    $(document.getElementById('fb-editor')).formBuilder();
  });
</script>