<%- include('partials/header'); -%>
 <!-- ########## START: RIGHT PANEL ########## -->
    <div class="br-sideright">
      <ul class="nav nav-tabs sidebar-tabs" role="tablist">
        <li class="nav-item">
          <a class="nav-link active" data-toggle="tab" role="tab" href="#contacts"><i class="icon ion-ios-contact-outline tx-24"></i></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" data-toggle="tab" role="tab" href="#attachments"><i class="icon ion-ios-folder-outline tx-22"></i></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" data-toggle="tab" role="tab" href="#calendar"><i class="icon ion-ios-calendar-outline tx-24"></i></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" data-toggle="tab" role="tab" href="#settings"><i class="icon ion-ios-gear-outline tx-24"></i></a>
        </li>
      </ul><!-- sidebar-tabs -->

      <!-- Tab panes -->
      <div class="tab-content">
        <div class="tab-pane pos-absolute a-0 mg-t-60 contact-scrollbar active" id="contacts" role="tabpanel">
          <label class="sidebar-label pd-x-25 mg-t-25">Online Contacts</label>
          <div class="contact-list pd-x-10">
            <a href="#" class="contact-list-link new">
              <div class="d-flex">
                <div class="pos-relative">
                  <img src="../img/img2.jpg" alt="">
                  <div class="contact-status-indicator bg-success"></div>
                </div>
                <div class="contact-person">
                  <p>Marilyn Tarter</p>
                  <span>Clemson, CA</span>
                </div>
                <span class="tx-info tx-12"><span class="square-8 bg-info rounded-circle"></span> 1 new</span>
              </div><!-- d-flex -->
            </a><!-- contact-list-link -->
            <a href="#" class="contact-list-link">
              <div class="d-flex">
                <div class="pos-relative">
                  <img src="../img/img3.jpg" alt="">
                  <div class="contact-status-indicator bg-success"></div>
                </div>
                <div class="contact-person">
                  <p class="mg-b-0 ">Belinda Connor</p>
                  <span>Fort Kent, ME</span>
                </div>
              </div><!-- d-flex -->
            </a><!-- contact-list-link -->
            <a href="#" class="contact-list-link new">
              <div class="d-flex">
                <div class="pos-relative">
                  <img src="../img/img4.jpg" alt="">
                  <div class="contact-status-indicator bg-success"></div>
                </div>
                <div class="contact-person">
                  <p>Britanny Cevallos</p>
                  <span>Shiboygan Falls, WI</span>
                </div>
                <span class="tx-info tx-12"><span class="square-8 bg-info rounded-circle"></span> 3 new</span>
              </div><!-- d-flex -->
            </a><!-- contact-list-link -->
            <a href="#" class="contact-list-link new">
              <div class="d-flex">
                <div class="pos-relative">
                  <img src="../img/img5.jpg" alt="">
                  <div class="contact-status-indicator bg-success"></div>
                </div>
                <div class="contact-person">
                  <p>Brandon Lawrence</p>
                  <span>Snohomish, WA</span>
                </div>
                <span class="tx-info tx-12"><span class="square-8 bg-info rounded-circle"></span> 1 new</span>
              </div><!-- d-flex -->
            </a><!-- contact-list-link -->
            <a href="#" class="contact-list-link">
              <div class="d-flex">
                <div class="pos-relative">
                  <img src="../img/img6.jpg" alt="">
                  <div class="contact-status-indicator bg-success"></div>
                </div>
                <div class="contact-person">
                  <p>Andrew Wiggins</p>
                  <span>Springfield, MA</span>
                </div>
              </div><!-- d-flex -->
            </a><!-- contact-list-link -->
            <a href="#" class="contact-list-link">
              <div class="d-flex">
                <div class="pos-relative">
                  <img src="../img/img7.jpg" alt="">
                  <div class="contact-status-indicator bg-success"></div>
                </div>
                <div class="contact-person">
                  <p>Theodore Gristen</p>
                  <span>Nashville, TN</span>
                </div>
              </div><!-- d-flex -->
            </a><!-- contact-list-link -->
            <a href="#" class="contact-list-link">
              <div class="d-flex">
                <div class="pos-relative">
                  <img src="../img/img8.jpg" alt="">
                  <div class="contact-status-indicator bg-success"></div>
                </div>
                <div class="contact-person">
                  <p>Deborah Miner</p>
                  <span>North Shore, CA</span>
                </div>
              </div><!-- d-flex -->
            </a><!-- contact-list-link -->
          </div><!-- contact-list -->


          <label class="sidebar-label pd-x-25 mg-t-25">Offline Contacts</label>
          <div class="contact-list pd-x-10">
            <a href="#" class="contact-list-link">
              <div class="d-flex">
                <div class="pos-relative">
                  <img src="../img/img2.jpg" alt="">
                  <div class="contact-status-indicator bg-gray-500"></div>
                </div>
                <div class="contact-person">
                  <p>Marilyn Tarter</p>
                  <span>Clemson, CA</span>
                </div>
              </div><!-- d-flex -->
            </a><!-- contact-list-link -->
            <a href="#" class="contact-list-link">
              <div class="d-flex">
                <div class="pos-relative">
                  <img src="../img/img3.jpg" alt="">
                  <div class="contact-status-indicator bg-gray-500"></div>
                </div>
                <div class="contact-person">
                  <p>Belinda Connor</p>
                  <span>Fort Kent, ME</span>
                </div>
              </div><!-- d-flex -->
            </a><!-- contact-list-link -->
            <a href="#" class="contact-list-link">
              <div class="d-flex">
                <div class="pos-relative">
                  <img src="../img/img4.jpg" alt="">
                  <div class="contact-status-indicator bg-gray-500"></div>
                </div>
                <div class="contact-person">
                  <p>Britanny Cevallos</p>
                  <span>Shiboygan Falls, WI</span>
                </div>
              </div><!-- d-flex -->
            </a><!-- contact-list-link -->
            <a href="#" class="contact-list-link">
              <div class="d-flex">
                <div class="pos-relative">
                  <img src="../img/img5.jpg" alt="">
                  <div class="contact-status-indicator bg-gray-500"></div>
                </div>
                <div class="contact-person">
                  <p>Brandon Lawrence</p>
                  <span>Snohomish, WA</span>
                </div>
              </div><!-- d-flex -->
            </a><!-- contact-list-link -->
            <a href="#" class="contact-list-link">
              <div class="d-flex">
                <div class="pos-relative">
                  <img src="../img/img6.jpg" alt="">
                  <div class="contact-status-indicator bg-gray-500"></div>
                </div>
                <div class="contact-person">
                  <p>Andrew Wiggins</p>
                  <span>Springfield, MA</span>
                </div>
              </div><!-- d-flex -->
            </a><!-- contact-list-link -->
            <a href="#" class="contact-list-link">
              <div class="d-flex">
                <div class="pos-relative">
                  <img src="../img/img7.jpg" alt="">
                  <div class="contact-status-indicator bg-gray-500"></div>
                </div>
                <div class="contact-person">
                  <p>Theodore Gristen</p>
                  <span>Nashville, TN</span>
                </div>
              </div><!-- d-flex -->
            </a><!-- contact-list-link -->
            <a href="#" class="contact-list-link">
              <div class="d-flex">
                <div class="pos-relative">
                  <img src="../img/img8.jpg" alt="">
                  <div class="contact-status-indicator bg-gray-500"></div>
                </div>
                <div class="contact-person">
                  <p>Deborah Miner</p>
                  <span>North Shore, CA</span>
                </div>
              </div><!-- d-flex -->
            </a><!-- contact-list-link -->
          </div><!-- contact-list -->

        </div><!-- #contacts -->


        <div class="tab-pane pos-absolute a-0 mg-t-60 attachment-scrollbar" id="attachments" role="tabpanel">
          <label class="sidebar-label pd-x-25 mg-t-25">Recent Attachments</label>
          <div class="media-file-list">
            <div class="media">
              <div class="pd-10 bg-gray-500 bg-mojito wd-50 ht-60 tx-center d-flex align-items-center justify-content-center">
                <i class="far fa-file-image tx-28 tx-white"></i>
              </div>
              <div class="media-body">
                <p class="mg-b-0 tx-13">IMG_43445</p>
                <p class="mg-b-0 tx-12 op-5">JPG Image</p>
                <p class="mg-b-0 tx-12 op-5">1.2mb</p>
              </div><!-- media-body -->
              <a href="#" class="more"><i class="icon ion-android-more-vertical tx-18"></i></a>
            </div><!-- media -->
            <div class="media mg-t-20">
              <div class="pd-10 bg-gray-500 bg-purple wd-50 ht-60 tx-center d-flex align-items-center justify-content-center">
                <i class="far fa-file-video tx-28 tx-white"></i>
              </div>
              <div class="media-body">
                <p class="mg-b-0 tx-13">VID_6543</p>
                <p class="mg-b-0 tx-12 op-5">MP4 Video</p>
                <p class="mg-b-0 tx-12 op-5">24.8mb</p>
              </div><!-- media-body -->
              <a href="#" class="more"><i class="icon ion-android-more-vertical tx-18"></i></a>
            </div><!-- media -->
            <div class="media mg-t-20">
              <div class="pd-10 bg-gray-500 bg-reef wd-50 ht-60 tx-center d-flex align-items-center justify-content-center">
                <i class="far fa-file-word tx-28 tx-white"></i>
              </div>
              <div class="media-body">
                <p class="mg-b-0 tx-13">Tax_Form</p>
                <p class="mg-b-0 tx-12 op-5">Word Document</p>
                <p class="mg-b-0 tx-12 op-5">5.5mb</p>
              </div><!-- media-body -->
              <a href="#" class="more"><i class="icon ion-android-more-vertical tx-18"></i></a>
            </div><!-- media -->
            <div class="media mg-t-20">
              <div class="pd-10 bg-gray-500 bg-firewatch wd-50 ht-60 tx-center d-flex align-items-center justify-content-center">
                <i class="far fa-file-pdf tx-28 tx-white"></i>
              </div>
              <div class="media-body">
                <p class="mg-b-0 tx-13">Getting_Started</p>
                <p class="mg-b-0 tx-12 op-5">PDF Document</p>
                <p class="mg-b-0 tx-12 op-5">12.7mb</p>
              </div><!-- media-body -->
              <a href="#" class="more"><i class="icon ion-android-more-vertical tx-18"></i></a>
            </div><!-- media -->
            <div class="media mg-t-20">
              <div class="pd-10 bg-gray-500 bg-firewatch wd-50 ht-60 tx-center d-flex align-items-center justify-content-center">
                <i class="far fa-file-pdf tx-28 tx-white"></i>
              </div>
              <div class="media-body">
                <p class="mg-b-0 tx-13">Introduction</p>
                <p class="mg-b-0 tx-12 op-5">PDF Document</p>
                <p class="mg-b-0 tx-12 op-5">7.7mb</p>
              </div><!-- media-body -->
              <a href="#" class="more"><i class="icon ion-android-more-vertical tx-18"></i></a>
            </div><!-- media -->
            <div class="media mg-t-20">
              <div class="pd-10 bg-gray-500 bg-mojito wd-50 ht-60 tx-center d-flex align-items-center justify-content-center">
                <i class="far fa-file-image tx-28 tx-white"></i>
              </div>
              <div class="media-body">
                <p class="mg-b-0 tx-13">IMG_43420</p>
                <p class="mg-b-0 tx-12 op-5">JPG Image</p>
                <p class="mg-b-0 tx-12 op-5">2.2mb</p>
              </div><!-- media-body -->
              <a href="#" class="more"><i class="icon ion-android-more-vertical tx-18"></i></a>
            </div><!-- media -->
            <div class="media mg-t-20">
              <div class="pd-10 bg-gray-500 bg-mojito wd-50 ht-60 tx-center d-flex align-items-center justify-content-center">
                <i class="far fa-file-image tx-28 tx-white"></i>
              </div>
              <div class="media-body">
                <p class="mg-b-0 tx-13">IMG_43447</p>
                <p class="mg-b-0 tx-12 op-5">JPG Image</p>
                <p class="mg-b-0 tx-12 op-5">3.2mb</p>
              </div><!-- media-body -->
              <a href="#" class="more"><i class="icon ion-android-more-vertical tx-18"></i></a>
            </div><!-- media -->
            <div class="media mg-t-20">
              <div class="pd-10 bg-gray-500 bg-purple wd-50 ht-60 tx-center d-flex align-items-center justify-content-center">
                <i class="far fa-file-video tx-28 tx-white"></i>
              </div>
              <div class="media-body">
                <p class="mg-b-0 tx-13">VID_6545</p>
                <p class="mg-b-0 tx-12 op-5">AVI Video</p>
                <p class="mg-b-0 tx-12 op-5">14.8mb</p>
              </div><!-- media-body -->
              <a href="#" class="more"><i class="icon ion-android-more-vertical tx-18"></i></a>
            </div><!-- media -->
            <div class="media mg-t-20">
              <div class="pd-10 bg-gray-500 bg-reef wd-50 ht-60 tx-center d-flex align-items-center justify-content-center">
                <i class="far fa-file-word tx-28 tx-white"></i>
              </div>
              <div class="media-body">
                <p class="mg-b-0 tx-13">Secret_Document</p>
                <p class="mg-b-0 tx-12 op-5">Word Document</p>
                <p class="mg-b-0 tx-12 op-5">4.5mb</p>
              </div><!-- media-body -->
              <a href="#" class="more"><i class="icon ion-android-more-vertical tx-18"></i></a>
            </div><!-- media -->
          </div><!-- media-list -->
        </div><!-- #history -->
        <div class="tab-pane pos-absolute a-0 mg-t-60 schedule-scrollbar" id="calendar" role="tabpanel">
          <label class="sidebar-label pd-x-25 mg-t-25">Time &amp; Date</label>
          <div class="pd-x-25">
            <h2 id="brTime" class="br-time"></h2>
            <h6 id="brDate" class="br-date"></h6>
          </div>

          <label class="sidebar-label pd-x-25 mg-t-25">Events Calendar</label>
          <div class="datepicker sidebar-datepicker"></div>


          <label class="sidebar-label pd-x-25 mg-t-25">Event Today</label>
          <div class="pd-x-25">
            <div class="list-group sidebar-event-list mg-b-20">
              <div class="list-group-item">
                <div>
                  <h6>Roven's 32th Birthday</h6>
                  <p>2:30PM</p>
                </div>
                <a href="#" class="more"><i class="icon ion-android-more-vertical tx-18"></i></a>
              </div><!-- list-group-item -->
              <div class="list-group-item">
                <div>
                  <h6>Regular Workout Schedule</h6>
                  <p>7:30PM</p>
                </div>
                <a href="#" class="more"><i class="icon ion-android-more-vertical tx-18"></i></a>
              </div><!-- list-group-item -->
            </div><!-- list-group -->

            <a href="#" class="btn btn-block btn-outline-secondary tx-uppercase tx-12 tx-spacing-2">+ Add Event</a>
            <br>
          </div>

        </div>
        <div class="tab-pane pos-absolute a-0 mg-t-60 settings-scrollbar" id="settings" role="tabpanel">
          <label class="sidebar-label pd-x-25 mg-t-25">Quick Settings</label>

          <div class="sidebar-settings-item">
            <h6 class="tx-13 tx-normal">Sound Notification</h6>
            <p class="op-5 tx-13">Play an alert sound everytime there is a new notification.</p>
            <div class="br-switchbutton checked">
              <input type="hidden" name="switch1" value="true">
              <span></span>
            </div><!-- br-switchbutton -->
          </div>
          <div class="sidebar-settings-item">
            <h6 class="tx-13 tx-normal">2 Steps Verification</h6>
            <p class="op-5 tx-13">Sign in using a two step verification by sending a verification code to your phone.</p>
            <div class="br-switchbutton">
              <input type="hidden" name="switch2" value="false">
              <span></span>
            </div><!-- br-switchbutton -->
          </div>
          <div class="sidebar-settings-item">
            <h6 class="tx-13 tx-normal">Location Services</h6>
            <p class="op-5 tx-13">Allowing us to access your location</p>
            <div class="br-switchbutton">
              <input type="hidden" name="switch3" value="false">
              <span></span>
            </div><!-- br-switchbutton -->
          </div>
          <div class="sidebar-settings-item">
            <h6 class="tx-13 tx-normal">Newsletter Subscription</h6>
            <p class="op-5 tx-13">Enables you to send us news and updates send straight to your email.</p>
            <div class="br-switchbutton checked">
              <input type="hidden" name="switch4" value="true">
              <span></span>
            </div><!-- br-switchbutton -->
          </div>
          <div class="sidebar-settings-item">
            <h6 class="tx-13 tx-normal">Your email</h6>
            <div class="pos-relative">
              <input type="email" name="email" class="form-control" value="janedoe@domain.com">
            </div>
          </div>

          <div class="pd-y-20 pd-x-25">
            <h6 class="tx-13 tx-normal tx-white mg-b-20">More Settings</h6>
            <a href="#" class="btn btn-block btn-outline-secondary tx-uppercase tx-11 tx-spacing-2">Account Settings</a>
            <a href="#" class="btn btn-block btn-outline-secondary tx-uppercase tx-11 tx-spacing-2">Privacy Settings</a>
          </div>
        </div>
      </div><!-- tab-content -->

    </div><!-- br-sideright -->
    <!-- ########## END: RIGHT PANEL ########## --->

    <!-- ########## START: MAIN PANEL ########## -->
    <div class="br-mainpanel">
      <div class="br-pageheader">
        <nav class="breadcrumb pd-0 mg-0 tx-12">
          <a class="breadcrumb-item" href="index-2.html">Bracket</a>
          <a class="breadcrumb-item" href="#">Forms</a>
          <span class="breadcrumb-item active">Form Layouts</span>
        </nav>
      </div><!-- br-pageheader -->
      <div class="br-pagetitle">
        <i class="icon ion-ios-gear-outline"></i>
        <div>
          <h4>Form Layouts</h4>
          <p class="mg-b-0">Forms are used to collect user information with different element types of input, select, checkboxes, radios and more.</p>
        </div>
      </div><!-- d-flex -->

      <div class="br-pagebody">
        <div class="br-section-wrapper">
          <h6 class="br-section-label">Top Label Layout<%= user.company %></h6>
          <p class="br-section-text">A form with a label on top of each form control.</p>

<% include ./partials/messages %>
      <form action="staffNew/<%= user.company %>" method="post">
          <div class="form-layout form-layout-1">
            <div class="row mg-b-25">
              <div class="col-lg-4">
                <div class="form-group">
                  <label class="form-control-label">Firstname: <span class="tx-danger">*</span></label>
                  <input class="form-control" type="text" name="name" value="John Paul" placeholder="Enter firstname">
                </div>
              </div><!-- col-4 -->
              <div class="col-lg-4">
                <div class="form-group">
                  <label class="form-control-label">Lastname: <span class="tx-danger">*</span></label>
                  <input class="form-control" type="text" name="lastname" value="McDoe" placeholder="Enter lastname">
                </div>
              </div><!-- col-4 -->
              <div class="col-lg-4">
                <div class="form-group">
                  <label class="form-control-label">Email address: <span class="tx-danger">*</span></label>
                  <input class="form-control" type="text" name="email" placeholder="Enter email address">
                </div>
              </div><!-- col-4 -->
              </div>

                <div class="row mg-b-25">
              <div class="col-lg-4">
                <div class="form-group">
                  <label class="form-control-label">Firstname: <span class="tx-danger">*</span></label>
                  <input class="form-control" type="password" name="password"  placeholder="Enter Password">
                </div>
              </div><!-- col-4 -->
              <div class="col-lg-4">
                <div class="form-group">
                  <label class="form-control-label">Lastname: <span class="tx-danger">*</span></label>
                  <input class="form-control" type="password" name="password2" placeholder="Confirm Password">
                </div>
              </div><!-- col-4 -->
              <div class="col-lg-4">
                <div class="form-group">
                  <label class="form-control-label">Email address: <span class="tx-danger">*</span></label>
                  <input class="form-control" type="text" name="company"  placeholder="Enter email address">
                </div>
              </div><!-- col-4 -->
              </div>

            <div class="row">
                      <table class="table table-bordered table-hover">
            <thead>
              <tr>
                <th class="wd-15p">Item</th>
                <th class="wd-15p">Can View</th>
                <th class="wd-15p">Can Create</th>
                <th class="wd-15p">Can Edit</th>
                <th class="wd-15p">Can Delete</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th scope="row">Emails</th>
                <td><label class="ckbox">
                     <input type="checkbox" name="emailView">
                     <span>Can View</span>
               </label></td>

                 <td><label class="ckbox">
                     <input type="checkbox" name="emailSend">
                     <span>Can Send</span>
               </label></td>

                <td><label class="ckbox">
                     <input type="checkbox" name="emailEdit">
                     <span>Can Edit</span>
               </label></td>

                <td><label class="ckbox">
                     <input type="checkbox" name="emailDelete">
                     <span>Can Delete</span>
               </label></td>
              </tr>

                           <tr>
                <th scope="row">SMS</th>
                <td><label class="ckbox">
                     <input type="checkbox" name="smsView">
                     <span>Can View</span>
               </label></td>

                 <td><label class="ckbox">
                     <input type="checkbox" name="smsSend">
                     <span>Can Send</span>
               </label></td>

               <td><label class="ckbox">
                     <input type="checkbox" name="smsEdit">
                     <span>Can Edit</span>
               </label></td>

                <td><label class="ckbox">
                     <input type="checkbox" name="smsDelete">
                     <span>Can Delete</span>
               </label></td>
              </tr> 

              <tr>
                <th scope="row">Invoices</th>
                <td><label class="ckbox">
                     <input type="checkbox" name="invoiceView">
                     <span>Can View</span>
               </label></td>

                 <td><label class="ckbox">
                     <input type="checkbox" name="invoiceSend">
                     <span>Can Send</span>
               </label></td>

               <td><label class="ckbox">
                     <input type="checkbox" name="invoiceEdit">
                     <span>Can Edit</span>
               </label></td>

                <td><label class="ckbox">
                     <input type="checkbox" name="invoiceDelete">
                     <span>Can Delete</span>
               </label></td>
              </tr>


              <tr>
                <th scope="row">Expenses</th>
                <td><label class="ckbox">
                     <input type="checkbox" name="expensesView">
                     <span>Can View</span>
               </label></td>

                 <td><label class="ckbox">
                     <input type="checkbox" name="expensesSend">
                     <span>Can Send</span>
               </label></td>

               <td><label class="ckbox">
                     <input type="checkbox" name="expensesEdit">
                     <span>Can Edit</span>
               </label></td>

                <td><label class="ckbox">
                     <input type="checkbox" name="expensesDelete">
                     <span>Can Delete</span>
               </label></td>
              </tr>


              <tr>
                <th scope="row">Customers</th>
                <td><label class="ckbox">
                     <input type="checkbox" name="customersView">
                     <span>Can View</span>
               </label></td>

                 <td><label class="ckbox">
                     <input type="checkbox" name="customersSend">
                     <span>Can Send</span>
               </label></td>

               <td><label class="ckbox">
                     <input type="checkbox" name="customersEdit">
                     <span>Can Edit</span>
               </label></td>

                <td><label class="ckbox">
                     <input type="checkbox" name="customersDelete">
                     <span>Can Delete</span>
               </label></td>
              </tr>

              <tr>
                <th scope="row">Leads</th>
                <td><label class="ckbox">
                     <input type="checkbox" name="leadsView">
                     <span>Can View</span>
               </label></td>

                 <td><label class="ckbox">
                     <input type="checkbox" name="leadsSend">
                     <span>Can Send</span>
               </label></td>

               <td><label class="ckbox">
                     <input type="checkbox" name="leadsEdit">
                     <span>Can Edit</span>
               </label></td>

                <td><label class="ckbox">
                     <input type="checkbox" name="leadsDelete">
                     <span>Can Delete</span>
               </label></td>
              </tr>


              <tr>
                <th scope="row">Meetings</th>
                <td><label class="ckbox">
                     <input type="checkbox" name="meetingsView">
                     <span>Can View</span>
               </label></td>

                 <td><label class="ckbox">
                     <input type="checkbox" name="meetingsSend">
                     <span>Can Send</span>
               </label></td>

               <td><label class="ckbox">
                     <input type="checkbox" name="meetingsEdit">
                     <span>Can Edit</span>
               </label></td>

                <td><label class="ckbox">
                     <input type="checkbox" name="meetingsDelete">
                     <span>Can Delete</span>
               </label></td>
              </tr>


              <tr>
                <th scope="row">Tasks</th>
                <td><label class="ckbox">
                     <input type="checkbox" name="taksView">
                     <span>Can View</span>
               </label></td>

                 <td><label class="ckbox">
                     <input type="checkbox" name="taksSend">
                     <span>Can Send</span>
               </label></td>

               <td><label class="ckbox">
                     <input type="checkbox" name="taksEdit">
                     <span>Can Edit</span>
               </label></td>

                <td><label class="ckbox">
                     <input type="checkbox" name="taksDelete">
                     <span>Can Delete</span>
               </label></td>
              </tr>



              <tr>
                <th scope="row">Staff</th>
                <td><label class="ckbox">
                     <input type="checkbox" name="staffView">
                     <span>Can View</span>
               </label></td>

                 <td><label class="ckbox">
                     <input type="checkbox" name="staffSend">
                     <span>Can Add</span>
               </label></td>

               <td><label class="ckbox">
                     <input type="checkbox" name="staffEdit">
                     <span>Can Edit</span>
               </label></td>

                <td><label class="ckbox">
                     <input type="checkbox" name="staffDelete">
                     <span>Can Delete</span>
               </label></td>
              </tr>


              <tr>
                <th scope="row">Settings</th>
                <td><label class="ckbox">
                     <input type="checkbox" name="settingsView">
                     <span>Can View</span>
               </label></td>

                 <td><label class="ckbox">
                     <input type="checkbox" name="settingsSend">
                     <span>Can Add</span>
               </label></td>

               <td><label class="ckbox">
                     <input type="checkbox" name="settingsEdit">
                     <span>Can Edit</span>
               </label></td>

                <td><label class="ckbox">
                     <input type="checkbox" name="settingsDelete">
                     <span>Can Delete</span>
               </label></td>
              </tr>

            
            </tbody>
          </table>

            </div>

            <div class="form-layout-footer">
              <button class="btn btn-info">Submit Form</button>
              <button class="btn btn-secondary">Cancel</button>
              </form>
            </div><!-- form-layout-footer -->
          </div><!-- form-layout -->

       





        </div><!-- br-section-wrapper -->
      </div><!-- br-pagebody -->
     

    <div id="modaldemo" class="modal fade effect-scale">
      <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content bd-0 rounded-0">
          <div class="modal-body pd-0">
            <div class="row flex-row-reverse no-gutters">
              <div class="col-lg-6">
                <div class="pd-30">
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                  <div class="pd-xs-x-30 pd-y-10">
                    <h5 class="tx-xs-28 tx-inverse mg-b-5">Welcome back!</h5>
                    <p>Sign in to your account to continue</p>
                    <br>
                    <div class="form-group">
                      <input type="email" name="email" class="form-control pd-y-12" placeholder="Enter your email">
                    </div><!-- form-group -->
                    <div class="form-group mg-b-20">
                      <input type="email" name="password" class="form-control pd-y-12" placeholder="Enter your password">
                      <a href="#" class="tx-12 d-block mg-t-10">Forgot password?</a>
                    </div><!-- form-group -->

                    <button class="btn btn-primary pd-y-12 btn-block">Sign In</button>

                    <div class="mg-t-30 mg-b-20 tx-12">Don't have an account yet? <a href="#">Sign Up</a></div>
                  </div>
                </div><!-- pd-20 -->
              </div><!-- col-6 -->
              <div class="col-lg-6 bg-primary">
                <div class="pd-40">
                  <h4 class="tx-white mg-b-20"><span>[</span> bracket + <span>]</span></h4>
                  <p class="tx-white op-7 mg-b-60">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
                  <p class="tx-white tx-13">
                    <span class="tx-uppercase tx-medium d-block mg-b-15">Our Address:</span>
                    <span class="op-7">Ayala Center, Cebu Business Park, Cebu City, Cebu, Philippines 6000</span>
                  </p>
                </div>
              </div><!-- col-6 -->
            </div><!-- row -->
          </div><!-- modal-body -->
        </div><!-- modal-content -->
      </div><!-- modal-dialog -->
    </div><!-- modal -->


<%- include('partials/footer'); -%>