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

{% macro component(id="tasks", filters=false, checkboxes=true, avatar=true, department=true, chips=false, status=true, type=true, phone=true, pagination=true, search=false, items=[]) %}
<div class="table-responsive" data-toggle="lists" data-lists-sort-by="js-lists-values-date" data-lists-sort-desc="false" data-lists-values='["js-lists-values-name", "js-lists-values-date"]'>
  {% if search %}
  <div class="card-header">
    <div class="search-form">
      <input type="text" class="form-control search" placeholder="Search ...">
      <button class="btn" type="button" role="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-name">Task</a>
        </th>
        <th style="width: 100px;">Tags</th>
        <th style="width: 48px;">
          <a 
            href="javascript:void(0)" 
            class="sort" 
            data-sort="js-lists-values-date">Due</a>
        </th>
        <th style="width: 100px;">Assigned to</th>
        <th style="width: 24px;"></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 and item.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">
              {% endif %}
              {% if item.avatar.title %}
                <span class="avatar-title rounded">{{ item.avatar.title }}</span>
              {% endif %}
            </div>
            <div class="media-body">
          {% endif %}
              
          <div class="d-flex align-items-center">
            <strong class="flex js-lists-values-name">{{ item.title }}</strong>

            {% if item.attachments %}
            <i class="material-icons icon-16pt text-20 mr-4pt">link</i>
            <small class="text-50">{{ item.attachments }}</small>
            {% endif %}

            {% if item.comments %}
            <i class="material-icons icon-16pt text-20 mr-4pt">comment</i>
            <small class="text-50">{{ item.comments }}</small>
            {% endif %}
          </div>

          {% if avatar and item.avatar %}
            </div>
          </div>
          {% endif %}
        </td>
        <td>
          <div class="d-flex align-items-center">
            {% for indicator in item.indicators %}
            <a href="" class="mr-4pt"><span class="indicator-line rounded {{ indicator }}"></span></a>
            {% endfor %}
          </div>
        </td>
        <td>
          <small class="js-lists-values-date text-50">{{ item.date }}</small>
        </td>
        <td>
          <div class="d-flex align-items-center">
            <div class="avatar-group flex mr-8pt">
              {% for avatar in item.avatars %}
              <div class="avatar avatar-xs" data-toggle="tooltip" data-placement="top" title="Janell D.">
                <a href=""><img src="{{ avatar }}" alt="Avatar" class="avatar-img rounded-circle"></a>
              </div>
              {% endfor %}

              {% for avatar in item.avatars_titles %}
              <div class="avatar avatar-xs" data-toggle="tooltip" data-placement="top" title="{{ avatar }}">
                <a href=""><span class="avatar-title bg-white border text-black-100 rounded-circle">{{ avatar }}</span></a>
              </div>
              {% endfor %}
            </div>
            <a style="text-decoration: none;" class="rounded-circle d-flex align-items-center border align-items-center text-50" href=""><i class="material-icons icon-16pt m-1">add</i></a>
          </div>
        </td>
        <td class="text-right">
          <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() }}