{% import 'components/pager.html' as pager %}

{% macro component(id="staff", filters=false, checkboxes=true, avatar=true, employer=true, chips=true, projects=true, pagination=true, search=false, items=[]) %}
<div class="table-responsive" data-toggle="lists" data-lists-sort-by="js-lists-values-employee-name" data-lists-values='["js-lists-values-employee-name", "js-lists-values-employer-name", "js-lists-values-projects", "js-lists-values-activity", "js-lists-values-earnings"]'>
  {% if search %}
  <div class="card-header">
    <div class="search-form">
      <input type="text" class="form-control search" placeholder="Search ...">
      <button class="btn" type="button"><i class="material-icons">search</i></button>
    </div>
  </div>
  {% endif %}

  {% if filters %}
  <div class="card-header">
    <form class="form-inline">
      <label class="mr-sm-2 form-label" for="inlineFormFilterBy">Filter by:</label>
      <input type="text" class="form-control search mb-2 mr-sm-2 mb-sm-0" id="inlineFormFilterBy" placeholder="Search ...">

      <label class="sr-only" for="inlineFormRole">Role</label>
      <select id="inlineFormRole" class="custom-select mb-2 mr-sm-2 mb-sm-0">
        <option value="All Roles">All Roles</option>
      </select>

      <div class="ml-auto mb-2 mb-sm-0 custom-control-inline mr-0">
        <label class="form-label mb-0" for="active">Active</label>
        <div class="custom-control custom-checkbox-toggle ml-8pt">
          <input checked="" type="checkbox" id="active" class="custom-control-input">
          <label class="custom-control-label" for="active">Active</label>
        </div>
      </div>
    </form>
  </div>
  {% endif %}

  <table class="table mb-0 thead-border-top-0 table-nowrap">
    <thead>
      <tr>
        {% if checkboxes %}
        <th style="width: 18px;" class="pr-0">
          <div class="custom-control custom-checkbox">
            <input type="checkbox" class="custom-control-input js-toggle-check-all" data-target="#{{ id }}" id="customCheckAll{{ id }}">
            <label class="custom-control-label" for="customCheckAll{{ id }}"><span class="text-hide">Toggle all</span></label>
          </div>
        </th>
        {% endif %}
        <th>
          <a 
            href="javascript:void(0)" 
            class="sort" 
            data-sort="js-lists-values-employee-name">Employee</a>
        </th>
        {% if employer %}
        <th style="width: 150px;">
          <a 
            href="javascript:void(0)" 
            class="sort" 
            data-sort="js-lists-values-employer-name">Employer</a>
        </th>
        {% endif %}
        {% if projects %}
        <th class="text-center" style="width: 48px;">
          <a 
            href="javascript:void(0)" 
            class="sort" 
            data-sort="js-lists-values-projects">Projects</a>
        </th>
        {% endif %}
        {% if chips %}
        <th style="width: 37px;">Status</th>
        {% endif %}
        <th style="width: 120px;">
          <a 
            href="javascript:void(0)" 
            class="sort" 
            data-sort="js-lists-values-activity">Activity</a>
        </th>
        <th style="width: 51px;">
          <a 
            href="javascript:void(0)" 
            class="sort" 
            data-sort="js-lists-values-earnings">Earnings</a>
        </th>
        <th style="width: 24px;" class="pl-0"></th>
      </tr>
    </thead>
    <tbody class="list" id="{{ id }}">
      {% for item in items %}
      <tr{% if checkboxes and item.selected %} class="selected"{% endif %}>
        {% if checkboxes %}
        <td class="pr-0">
          <div class="custom-control custom-checkbox">
            <input type="checkbox" class="custom-control-input js-check-selected-row"{% if item.selected %} checked=""{% endif %} id="customCheck1_{{ id }}{{ loop.index }}">
            <label class="custom-control-label" for="customCheck1_{{ id }}{{ loop.index }}"><span class="text-hide">Check</span></label>
          </div>
        </td>
        {% endif %}
        <td>
          {% if avatar %}
          <div class="media flex-nowrap align-items-center" style="white-space: nowrap;">
            <div class="avatar avatar-sm mr-8pt">
              {% if item.avatar.image %}
                <img src="{{ item.avatar.image }}" alt="Avatar" class="avatar-img rounded-circle">
              {% endif %}
              {% if item.avatar.title %}
                <span class="avatar-title rounded-circle">{{ item.avatar.title }}</span>
              {% endif %}
            </div>
            <div class="media-body">
          {% endif %}

          <div class="d-flex flex-column">
            <p class="mb-0"><strong class="js-lists-values-employee-name">{{ item.name }}</strong></p>
            <small class="js-lists-values-employee-email text-50">{{ item.email }}</small>
          </div>

          {% if avatar %}
            </div>
          </div>
          {% endif %}
        </td>
        {% if employer %}
        <td>
          <div class="d-flex align-items-center">
            <a href="#" class="text-warning"><i class="material-icons mr-8pt">star</i></a>
            <a href="" class="text-70"><span class="js-lists-values-employer-name">{{ item.employer }}</span></a>
          </div>
        </td>
        {% endif %}
        {% if projects %}<td class="text-center js-lists-values-projects small">{{ item.projects }}</td>{% endif %}
        {% if chips %}
        <td>
          {% if item.chips %}
            {% for chip in item.chips %}
            <a href="{{ prefix or '' }}" class="chip chip-outline-secondary">{{ chip }}</a>
            {% endfor %}
          {% endif %}
        </td>
        {% endif %}
        <td class="text-50 js-lists-values-activity small">{{ item.date }}</td>
        <td class="js-lists-values-earnings small">{{ item.earnings }}</td>
        <td class="text-right pl-0">
          <a href="" class="text-50"><i class="material-icons">more_vert</i></a>
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% if pagination %}
<div class="card-footer p-8pt">
  {{ pager.pager() }}
</div>
<!-- <div class="card-body bordet-top text-right">
  15 <span class="text-50">of 1,430</span> <a href="#" class="text-50"><i class="material-icons ml-1">arrow_forward</i></a>
</div> -->
{% endif %}
{% endmacro %}
{{ component() }}