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

{% macro shift(title, time) %}
<a class="d-flex flex-column border-1 rounded bg-light px-8pt py-4pt lh-1" href="">
  <small><strong class="js-lists-values-name text-black-100">{{ title }}</strong></small>
  <small class="text-black-50">{{ time }}</small>
</a>
{% endmacro %}

{% macro component(id="contacts", filters=false, checkboxes=true, avatar=true, company=true, chips=true, phone=true, pagination=true, search=false, items=[]) %}
<div class="table-responsive" data-toggle="lists" data-lists-values='["js-lists-values-name"]'>
  {% 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 table-bordered table-flush mb-0 thead-border-top-0 table-nowrap">
    <thead>
      <tr>
        {% if checkboxes %}
        <th style="width: 18px;" class="pr-0 border-right-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{% if checkboxes %} class="border-left-0"{% endif %}>
          <a 
            href="javascript:void(0)" 
            class="sort" 
            data-sort="js-lists-values-name">Name</a>
        </th>
        <th>
          <div class="lh-1 d-flex flex-column text-50 my-4pt">
            Monday <small>25/02/2019</small>
          </div>
        </th>
        <th>
          <div class="lh-1 d-flex flex-column text-50 my-4pt">
            Tuesday <small>26/02/2019</small>
          </div>
        </th>
        <th>
          <div class="lh-1 d-flex flex-column text-50 my-4pt">
            Wednesday <small>27/02/2019</small>
          </div>
        </th>
        <th>
          <div class="lh-1 d-flex flex-column text-50 my-4pt">
            Thursday <small>28/02/2019</small>
          </div>
        </th>
        <th>
          <div class="lh-1 d-flex flex-column text-50 my-4pt">
            Friday <small>01/03/2019</small>
          </div>
        </th>
        <th>
          <div class="lh-1 d-flex flex-column text-50 my-4pt">
            Saturday <small>02/03/2019</small>
          </div>
        </th>
        <th>
          <div class="lh-1 d-flex flex-column text-50 my-4pt">
            Sunday <small>03/03/2019</small>
          </div>
        </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 border-right-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 checkboxes %} class="border-left-0"{% endif %}>
          {% 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 bg-white border text-100">{{ item.avatar.title }}</span>
              {% endif %}
            </div>
            <div class="media-body ml-4pt">
          {% endif %}
              
          <p class="mb-0"><strong class="js-lists-values-name">{{ item.name }}</strong></p>

          {% if avatar %}
            </div>
          </div>
          {% endif %}
        </td>
        <td>
          {% if item.monday %}
            {{ shift(title=item.monday.title, time=item.monday.time) }}
          {% endif %}
        </td>
        <td>
          {% if item.tuesday %}
            {{ shift(title=item.tuesday.title, time=item.tuesday.time) }}
          {% endif %}
        </td>
        <td>
          {% if item.wednesday %}
            {{ shift(title=item.wednesday.title, time=item.wednesday.time) }}
          {% endif %}
        </td>
        <td>
          {% if item.thursday %}
            {{ shift(title=item.thursday.title, time=item.thursday.time) }}
          {% endif %}
        </td>
        <td>
          {% if item.friday %}
            {{ shift(title=item.friday.title, time=item.friday.time) }}
          {% endif %}
        </td>
        <td>
          {% if item.saturday %}
            {{ shift(title=item.saturday.title, time=item.saturday.time) }}
          {% endif %}
        </td>
        <td>
          {% if item.sunday %}
            {{ shift(title=item.sunday.title, time=item.sunday.time) }}
          {% endif %}
        </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 border-0 p-8pt">
  {{ pager.pager() }}
</div>
<!-- <div class="card-body 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() }}