{% import 'components/samples/tables.html' as samples %}

<div class="{{ containerClass }} page__container">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="index.html">Home</a></li>
    <li class="breadcrumb-item">Components</li>
    <li class="breadcrumb-item active">Tables</li>
  </ol>

  <h1 class="h2">Tables</h1>

  <div class="card">
    <div class="card-body">
      <div class="row">
        <div class="col-lg-4">
          <h4 class="card-title">Toggle Checkboxes</h4>
          <p>A tiny plugin which adds the ability to toggle all checkboxes within a table.</p>
        </div>
        <div class="col-lg-8">
          {% import "components/staff-table.html" as staff_table %}
          {{ staff_table.component(employer=false, projects=false, pagination=false) }}
        </div>
      </div>
    </div>
    <div class="card-footer bg-dark">
      {{ samples.tables_toggle_checkboxes() }}
    </div>
  </div>

  <div class="card">
    <div class="card-body">
      <div class="row">
        <div class="col-lg-4">
          <h4 class="card-title">Search</h4>
          <p>Add search functionality to your tables with List.js. Please read the <a href="http://listjs.com/" target="_blank">official plugin documentation</a> for a full list of options.</p>
        </div>
        <div class="col-lg-8">
          {{ staff_table.component(
            id="search",
            checkboxes=false, 
            avatar=false, 
            employer=false, 
            projects=false, 
            pagination=false, 
            search=true) }}
        </div>
      </div>
    </div>
    <div class="card-footer bg-dark">
      {{ samples.tables_search() }}
    </div>
  </div>

  <div class="card">
    <div class="card-body">
      <div class="row">
        <div class="col-lg-4">
          <h4 class="card-title">Sort Columns</h4>
          <p>Add sorting functionality to your tables with by List.js. Please read the <a href="http://listjs.com/" target="_blank">official plugin documentation</a> for a full list of options.</p>
        </div>
        <div class="col-lg-8">
          {% import "components/sort-table.html" as sort_table %}
          {{ sort_table.component() }}
        </div>
      </div>
    </div>
    <div class="card-footer bg-dark">
      {{ samples.tables_sort() }}
    </div>
  </div>
</div>