tabler/pages/users-list.html

---
layout: default
title: Users list
page-title: Users
done: true
---

<div class="row row-cards">
   <div class="col-lg-4">
      <form class="card">
         <div class="card-body">
            <div class="mb-2">
               <div class="form-label">Filter</div>
               <input type="text" class="form-control"/>
            </div>
            <div class="mb-2">
               <div class="form-label">Calendar</div>
               <input type="text" class="form-control"/>
            </div>
            <div class="mb-2">
               <div class="form-label">Group</div>
               <div class="selectgroup w-100">
                  <label class="selectgroup-item">
                     <input type="radio" name="value" value="s" class="selectgroup-input" checked>
                     <span class="selectgroup-button">S</span>
                  </label>
                  <label class="selectgroup-item">
                     <input type="radio" name="value" value="m" class="selectgroup-input">
                     <span class="selectgroup-button">M</span>
                  </label>

                  <label class="selectgroup-item">
                     <input type="radio" name="value" value="l" class="selectgroup-input">
                     <span class="selectgroup-button">L</span>
                  </label>
                  <label class="selectgroup-item">
                     <input type="radio" name="value" value="xl" class="selectgroup-input">
                     <span class="selectgroup-button">XL</span>
                  </label>
               </div>
            </div>
            <div class="mb-2">
               <div class="form-label">Country</div>
               <select class="custom-select form-control">
                  <option value="">United States</option>
               </select>
            </div>
         </div>

         <div class="card-footer text-right">
            <button type="submit" class="btn btn-primary">Search</button>
         </div>
      </form>
   </div>
   <div class="col-lg-8">
      <div class="card">
         <table class="table card-table table-vcenter">
            <tr>
               <th class="w-1"></th>
               <th class="w-1"></th>
               <th>Name</th>
               <th class="d-none d-sm-table-cell">Date</th>
               <th class="d-none d-md-table-cell">Amount</th>
            </tr>
            {% for user in site.data.people limit: 20 offset: 40 %}
            <tr>
               <th>
                  <label class="custom-control custom-checkbox">
                     <input type="checkbox" class="custom-control-input" name="" value="">
                     <div class="custom-control-label"></div>
                  </label>
               </th>
               <td><span class="avatar d-block rounded" style="background-image: url({{ user.photo }})"></span></td>
               <td>{{ user.first_name }} {{user.last_name }}</td>
               <td class="d-none d-sm-table-cell">{{ user.birth_date | date: '%B %d, %Y' }}</td>
               <td class="d-none d-md-table-cell">${{ forloop.index | random_number: 500, 2000, 2 }}</td>
            </tr>
            {% endfor %}
         </table>
      </div>

      {% include parts/pagination.html %}
   </div>
</div>