Mini Shell

<% include ../partials/header %>

<% include ../partials/sidebar %>

<style>
  .quick-btn { background: #EEEEEE;
    box-shadow: 0 0 0 1px #F8F8F8 inset, 0 0 0 1px #CCCCCC;
    color: #444444;
    display: inline-block;
    height: 80px;
    margin: 10px;
    padding-top: 16px;
    text-align: center;
    text-decoration: none;
    width: 90px;
    position: relative;
    }
    .quick-btn span {
    display: block;
    }
    .quick-btn .label {
    position: absolute;
    right: -5px;
    top: -5px;
    }
    .quick-btn:hover {
    text-decoration: none;
    color: #fff;
    background-color: #4d7589;
    box-shadow: 3px 4px 1px #ccc;
    }
    .quick-btn.small {
    width: 40px;
    height: 30px;
    padding-top: 6px;
    }

</style>

<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="text-center">

        <a class="quick-btn text-red" href="#" data-toggle="modal" data-target="#role">
          <i class="la la-plus fa-2x"></i>
          <span>New Role</span>
        </a>
      </div>


      <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">
                    <table class="table table-striped table-bordered zero-configuration">
                      <thead>
                        <tr>
                          <th>S/N</th>
                          <th>Name</th>
                          <th>Description</th>
                          <th>Action</th>
                        </tr>
                      </thead>
                      <tbody>
                        <% userroles.forEach(function(userrole, index){ %>
                        <tr>
                          <td>
                            <%= (index + 1) %>
                          </td>
                          <td>
                            <%= userrole.userId %>
                          </td>
                          <td>
                            <%= userrole.roleId %>
                          </td>
                          <td>
                            <button type="button" class="btn btn-icon btn-warning mr-1"><i class="la la-pencil"></i></button>
                            <button type="button" class="btn btn-icon btn-danger mr-1"><i class="la la-close"></i></button>
                          </td>
                        </tr>
                        <% }); %>
                      </tbody>
                      <tfoot>
                        <tr>
                          <th>S/N</th>
                          <th>Name</th>
                          <th>Description</th>
                          <th>Action</th>
                        </tr>
                      </tfoot>
                    </table>
                  </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/user/role">
        <div class="modal-body">
          <fieldset class="form-group floating-label-form-group">
            <label for="name">Role Name</label>
            <select class="form-control" name="role" id="role">
              <option disabled selected>Select Role</option>
              <% roles.forEach(function(role, index){ %>
              <option value="<%= role.id %>">
                <%= role.name %>
              </option>
              <% }); %>
            </select>
          </fieldset>
          <fieldset class="form-group floating-label-form-group">
            <label for="name">User Name</label>
            <select class="form-control" name="user" id="user">
              <option disabled selected>Select User</option>
              <% users.forEach(function(user, index){ %>
              <option value="<%= user.id %>">
                <%= user.firstName %>
                <%= user.lastName %>
              </option>
              <% }); %>
            </select>
          </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 %>